方法一：

使用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();      
    },
}

延伸：

取消默认事件方法：

<div class="parent-wrapper" @click.prevent="clickWrapper">点这里</div>

阻止事件冒泡也要取消默认事件：

<div class="parent-wrapper" @click.stop.prevent="clickWrapper">点这里</div>

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12157