VUE中如何实现阻止事件冒泡
更新时间：2022年08月31日 14:07:52 作者：得知此事须躬行
这篇文章主要介绍了VUE中如何实现阻止事件冒泡，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
如何阻止事件冒泡
当父子元素中都有点击事件的时候，为了让触发子元素中的事件时，不去触发父元素中的事件，可以在子元素事件中添加stop来阻止事件冒泡。
如图，在button的点击事件中加上stop，触发addStatus的时候，就不会去触发父元素中的showColorStatus事件。
科普
.stop是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件.prevent是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交.self是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号.capture是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式.once是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行.passive滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。
阻止click事件冒泡(防止触发另一个事件)的方法
方法一
使用vue阻止子级元素的click事件冒泡。简单得：可以直接用stop
<div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span> </div>
这样点击div里面的按钮1，就不会触发div绑定时间test1()方法。
方法二
可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件
@click="_stopPropagation($event)"
methods：{
_stopPropagation(ev){
var _this = this;
ev.stopPropagation();
},
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了vue实现列表展示的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了基于Vue实现微信小程序的图文编辑器,由于微信小程序不能使用常规的图文编辑器(比如百度的UEditor )编辑新闻内容之类的，所以用vue写了个针对小程序用的图文编辑器需要的朋友可以参考下2018-07-07
这篇文章主要介绍了解决vue单页面应用进入页面加载所有 js 的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
使用vue-router切换页面时，获取上一页url以及当前页面url的方法
这篇文章主要介绍了使用vue-router切换页面时，获取上一页url以及当前页面url的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
vue3开发过程中,绑定的响应式数据失去了响应式,如何解决问题呢,下面这篇文章主要给大家介绍了关于vue3下会造成响应式丢失的情况,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了vue实现表单数据的增删改功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue仿element实现分页器效果，实现思路是定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2)，具体实例代码大家参考下本文2018-09-09
Ant Design of Vue select框获取key和name的问题
这篇文章主要介绍了Ant Design of Vue select框获取key和name的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了在Uni中使用Vue的EventBus总线机制操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要给大家介绍了关于Vue中添加滚动事件设置的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
最新评论