原生JavaScript和Vue、小程序都是如何阻止事件冒泡的？

前言

事件冒泡，可能有些同学还不是很清楚，什么是事件冒泡？来看个简单例子。

    

        点击我
    

点击“点击我”,会依次弹出：最里层---->中间层---->最外层---->然后跳转链接，这就是事件冒泡，下面来看看如何解决这个问题

原生JavaScript和Vue、小程序都是如何阻止事件冒泡的？

JavaScript解决事件冒泡

event.stopPropagation()

$(function() {
    $("#ahref").click(function(event) {
        event.stopPropagation();
    });
});

再点击“点击我”，会弹出：最里层---->然后跳转链接

return false;

$(function() {
　　$("#ahref").click(function(event) {
　　　　return false;
　　});
});

再点击“点击我”，会弹出：最里层，但不会跳转链接

event.preventDefault()

$(function() {
　　$("#ahref").click(function(event) {
　　　　event.preventDefault()
　　});
});

点击“点击我”，依次弹出：最里层---->中间层---->最外层，但最后没有跳转链接

由此可以看出

event.stopPropagation()
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）

return false
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

event.preventDefault()
事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

Vue解决事件冒泡

Vue.js为v-on提供了 事件修饰符，我们只需要添加click.stop即可防止事件冒泡

    

        

            编辑
            确定
        
    

vue事件修饰符

.stop

.prevent

.capture

.self

.once

 


 


 


 

...
 

...

提示：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。

小程序解决事件冒泡

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

公告

喜欢小编记得点击关注哦，原创文章等你哦=>web秀