本文主要介绍了VUE如何防止突发事件冒泡，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

如何防止事件冒泡？方法1和2防止点击事件冒泡(防止触发另一个事件)

如何阻止事件冒泡

当父元素和子元素中都有click事件时，为了避免子元素中的事件被触发时触发父元素中的事件，可以在子元素中的事件中添加stop，防止事件冒泡。

如图，在按钮的click事件中添加stop并触发addStatus时，不会触发父元素中的showColorStatus事件。

科普

。stop是为了防止冒泡行为，防止当前元素的事件向外触发，比如防止点击div的内部事件，触发div事件。阻止是阻止事件本身的行为，比如阻止超链接的点击和跳转，阻止表单表单的点击和提交。self只有被自己触发才会被执行。如果它是由内部冒泡事件触发的，这个信号将被忽略。捕获是改变js的默认事件机制，默认是冒泡。capture的功能是将冒泡改为监听模式。once是将事件设置为只执行一次。例如，click.prevent.once代表只停止一次事件的默认行为，第二次触发时会执行事件本身的行为。被动滚动事件的默认行为(即滚动行为)将被立即触发，而无需等待onScroll。这个。被动修改器尤其可以提高移动终端的性能。

阻止click事件冒泡(防止触发另一个事件)的方法

方法一

使用vue防止子元素的click事件冒泡。简单：可以直接用stop。

div @click='test1()'

Span @click.stop='test2()'按钮1/span

Span按钮2/span

/div

这样，单击div中的按钮1将不会触发div绑定时间test1()方法。

方法二

您可以编写自己的防气泡事件，然后在bubbling元素中调用该事件。

@ click=' _ stop propagation($ event)'

方法：{

_停止传播(ev){

var _ this=this

ev . stop propagation()；

},

}

以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。