vue中阻止冒泡事件 @click.stop.native

最新推荐文章于 2025-05-16 11:21:58 发布
原创 最新推荐文章于 2025-05-16 11:21:58 发布 · 3.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文介绍 Element UI 中的开关组件使用方法，展示了如何通过添加 @click.stop.native 实现阻止事件冒泡的效果。此组件适用于控制布尔值状态切换的场景。 
            <el-switch
              v-model="scope.row.isRecommend"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="changeStatus($event, scope.row)"
              @click.stop.native
            >
            </el-switch>

直接在其子组件或者子元素上加 @click.stop.native就可以了

wuningw
关注
vue2 -- 复选框checkbox阻止事件冒泡（折叠面板标题中增加复选框，阻止点击复选框折叠面板展开/折叠）
King Saj
04-08 1263
注意不是设置change事件的事件冒泡@click.stop.native=“()=>{}”，这里定义了一个点击事件（无执行语句），并为事件增加了阻止冒泡指令.stop ，由于el-checkbox是组件不是标签，需要在.stop后面加上.[native。在折叠面板的标题右侧加上复选框，可以勾选选中当前数据，但是会触发折叠面板的展开/折叠效果。
draggable中的input、textArea无法聚焦问题解决
IU
01-11 1199
如果需要更广泛的支持，可以考虑使用 @pointerdown.stop.native；@pointerdown.stop.native 在 pointerdown 事件发生时触发，这一事件在用户按下指针设备按钮（例如鼠标左键或触摸屏点击）时触发。@pointerdown.stop.native 针对的是 pointerdown 事件，它是一个原生事件，包括鼠标点击、触摸屏点击等。@pointerdown.stop.native 与 @click.stop 有一些区别，主要涉及到事件类型和触发时机。
记录--@click和@click.native有什么区别，如何阻止第三方组件内部的冒泡
林恒的博客
09-06 6583
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 一.@click和@click.native的区别 vue @click.native 原生点击事件： 1，给vue组件绑定事件时候，必须加上native ，不然不会生效(监听根元素的原生事件，使用 .native 修饰符) 2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click...
vue @click.native和@click.stop和@click.self
热门推荐
前端技术的学习整理
05-10 12万+
参考一： vue @click.native 原生点击事件： 1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用.native修饰符） 2，等同于在自组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click".fn) 参考二： 在事件处理器中经常需要调用event.preventDefault()...
vue中＠click的事件修饰符
潜行IT的博客
10-31 2万+
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。 .stop ...
一个因@click.stop引发的bug的解决
10-17
开发者在项目中的菜单栏组件中使用了`<div class="main" @click.stop="isShowWhole = false">`，这里的`@click.stop`修饰符阻止了事件冒泡，可能导致Popover外部点击的事件判断无法正常触发。移除`stop`修饰符后，...
解决VUE框架 导致绑定事件的阻止冒泡失效问题
11-27
总结来说，当遇到Vue中阻止冒泡失效的问题时，我们需要确保事件处理器定义在Vue实例的`methods`中，并使用事件修饰符`.stop`来阻止事件冒泡。同时，Vue提供的其他事件修饰符如`.prevent`, `.capture`, `.self` 和 `....
el-row的@click.stop并没有阻止事件冒泡，还是会触发外层div的点击事件
changyana的博客
08-19 1224
当点击一个元素时，会进行冒泡，一直触发到父元素。可以通过给click加stop来阻止事件冒泡，如：@click.stop=“search_maf_version(version)”，但是发现给el-row加上@click.stop并没有生效，还是会触发外部的点击事件。在使用 Vue.js 框架的 Element UI 库中，对于一些组件，如 el-row ，可能不能直接通过在其上添加 @click 来绑定原生的 click 事件，因为这些组件可能没有实现 click 事件的派发。
@click.native.prevent
seimeii的博客
12-03 2459
1、加native作用 为了让点击事件生效 元素中绑定了这个事件 <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button> 1、在封装好的组件上使用，所以要加上.native才能click。 2、prevent是用来阻止默认的事件。就相当于…event.preventDe
vue3 事件处理stop、self、prevent
qq_44136028的博客
05-16 705
在Vue.js中，事件处理通过v-on指令（简写为@）实现，用于监听DOM事件并执行相应的JavaScript代码。事件处理器可以是内联的JavaScript语句，也可以是指向组件方法的属性名或路径。Vue支持事件修饰符（如.stop、.prevent等）来改变事件的默认行为，按键修饰符（如.enter、.tab等）来监听特定按键事件，以及系统按键修饰符（如.ctrl、.alt等）来监听组合键事件。此外，鼠标按键修饰符（如.left、.right等）允许监听特定的鼠标按键事件。这些功能使得Vue.js在事件
@click.stop .prevent .capture .native事件修饰符,防止元素点击
林中明月间丶
01-26 2288
&lt;body&gt; &lt;div id="app"&gt; &lt;button @click="fn"&gt;测试事件&lt;/button&gt; &lt;a @click.prevent href="https:www.baidu.com"&gt;baidu&lt;/a&gt; &lt;!--失效--&gt;
Vue中@click.stop与@click.prevent、@click.native
qq_40925546的博客
06-21 8985
Vue中@click.stop与@click.prevent、@click.native
2021-8-10 记录：vue @click.native和@click.stop和@click.self
weixin_44845483的博客
08-10 399
学习链接1 学习链接2 .native–侦听组件根元素上的原生事件 作用：给组件绑定原生事件 比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加 .native, 事件是不会触发的，因此需要加上 .native 才会触发事件 当给一个vue组件绑定事件的时候，要加上native，如果是普通的html元素，就不需要 <primary-title-home title="
uni-app @click.stop @click.stop.native均不生效
weixin_54586234的博客
10-29 1267
uniApp官方真的是一坨大翔，不仅社区不维护，文档也写的跟粑粑一样，自创的nvue更是粑中粑中粑（强烈建议app端不要用 各种莫名其妙的诡异bug）
vue 事件修饰符 .native 阻止组件事件多次调用 如el-radio
weixin_45572314的博客
04-29 677
native获取dom原生事件，一般在组件上使用。 给vue组件绑定事件时，必须加上native。 如 <el-radio-group v-model="radio" @click.native="onClick($event)"> <el-radio :label="1">1</el-radio> <el-radio :label="2">2</el-radio> <el-radio :label="3">
vue学习笔记7-事件修饰符
清砾的博客
10-27 450
vue中事件修饰符有6个 ：.stop .prevent .capture .self .once .passive 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。 尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。 修饰符是由点开头的指令后缀来表示的。 .stop 阻止冒泡事件 .preve
vue或uni中.stop阻止事件冒泡报错的问题（修饰符.native）
zhangjiayu88的博客
04-02 6541
在开发中我们常常会遇到要阻止事件冒泡的问题，加个.stop就好了。但是在组件上阻止事件冒泡会报错：$event.stoppropagation is not a function。这是因为当事件添加到Vue组件上时，会变成自定义事件，如果想要触发事件的回掉函数，则必须子组件内的$emit调用才可以。1.native修饰符可以让父组件接收到原生事件, 否则只能接收自定义事件(通过子组件$emit触发)；2. native修饰符只能用在组件上, 不能用在原生标签上。，就可以解决这个报错问题。
@click.stop的作用
最新发布
11-18
1. 定义：@click.stop是Vue.js的事件修饰符，用于阻止事件冒泡。 2. 作用机制：它会在触发当前元素的事件处理函数后，调用event.stopPropagation()方法，阻止事件继续向父元素传播。 3. 使用场景：当子元素和父元素...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值