@click.native和@click的区别?

news/2025/1/20 8:04:50/

@click 是 Vue.js 框架提供的模板语法,用于绑定 DOM 元素的 click 事件,等价于 v-on:click。它只能监听 Vue 组件内部元素的 click 事件,并且会阻止默认行为和事件冒泡。

@click.native 则是 Vue.js 框架提供的修饰符之一,用于监听 DOM 元素的原生 click 事件,不会对默认行为和事件冒泡进行任何处理。相比于 @click,它可以监听任何 DOM 元素的 click 事件,包括组件内嵌套的子组件和子元素。

举个例子,如果你想监听一个来自于 slot 内的元素的 click 事件,可以使用 @click.native 来绑定该事件。

使用@click点击事件不生效、使用@click.native才生效是为啥?

在引入 better-scroll 组件中使用 @click 事件会失效,需要在 better-scroll 的配置项中设置 click: true,才能使 @click 事件生效。这是因为 better-scroll 会阻止默认的浏览器事件,并将其转化为自定义的滚动事件,从而导致原生的 click 事件无法响应。

@click.native 可以监听 DOM 元素的原生 click 事件,不会经过 better-scroll 的处理,因此能够正常响应用户的点击操作。

综上所述,如果在使用 better-scroll 或其他可能影响原生 click 事件响应的组件时,建议使用 @click.native 来绑定 click 事件,从而避免事件失效的问题。


http://www.ppmy.cn/news/943948.html

相关文章

关于click()和onclick()的区别

click()和onclick()的区别: 1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件。 2.click()方法的主要作用是触发调用click方法元素…

click工具的使用

目录 一:Click导航二:Click的基本使用1: 官网案例演示:2: click.command装饰器3: click.group()装饰器:4: 命令行参数4.1: Option参数:4.2: Argument参数: 5:…

vue中@click不触发时,用onclick怎么代替

转载地址:https://www.cnblogs.com/xr210/p/13531778.html

vue @click.native和@click.stop和@click.self

参考一: vue click.native 原生点击事件: 1,给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符) 2,等同于在自组件中&a…

JQuery $().click()与$().on(click...)区别

jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式。就拿 ( ) . c l i c k ( ) 和 ().click()和 ().click()和(document).on(‘click’,‘要选择的元素’,function(){})来说&#xff…

click()和onclick()的区别

click()和onclick()的区别: 1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件。 2.click()方法的主要作用是触发调用click方法元素…

$().click()和$().on(‘click‘,function(){})的区别

在处理js追加元素点击事件时 遇到点问题 当你用$().click() 触发的时候 你追击的元素会无法触发 也就是 不在页面内的元素 on方法包含很多事件,点击,双击等等事件。和$().click()的用法一样,最大的区别即优点是如果动态创建的元素在该选择器…

Vue中@click.stop与@click.prevent

Vue中click.stop与click.prevent 一、click.stop 问题&#xff1a;父元素中添加了一个click事件&#xff0c;其下面的子元素中也添加了click事件&#xff0c;此时&#xff0c;我想点击子元素获取子元素的点击事件&#xff0c;但却触发的是父元素的事件&#xff1a; <view…