Vue中阻止事件冒泡的方法与修饰符详解

如何阻止事件冒泡

当父子元素均绑定了点击事件时，若希望触发子元素事件时不触发父元素事件，可在子元素的事件处理中添加.stop修饰符以阻止事件冒泡。

如图所示，在button的点击事件中应用.stop修饰符，触发addStatus时，便不会触发父元素中的showColorStatus事件。

科普

• .stop 用于阻止冒泡行为，防止当前元素的事件继续向外层触发，例如阻止点击div内部内容时触发div本身的事件。
• .prevent 用于阻止事件本身的默认行为，例如阻止超链接的点击跳转或form表单的提交动作。
• .self 表示事件仅在当前元素自身触发时执行，若接收到内部冒泡传递的信号，则忽略该信号。
• .capture 用于改变JavaScript默认的事件机制，默认机制为冒泡，而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();      
    },
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。