阻止事件冒泡的方法
前端结构
<div id="app">
<div class="father-box" @click="clickFatherBox">
我是父盒子
<div class="son-box" @click="clickSonBox">
我是子盒子
</div>
</div>
</div>
methods: {
clickSonBox(){
alert("子盒子")
},
clickFatherBox(){
alert("父盒子")
}
},
事件冒泡:clickSonBox事件发生时clickFatherBox事件也被触发了
此时点击子盒子 对话框弹出两次
方法1:使用js阻止事件冒泡
clickSonBox(e){
e.stopPropagation();
alert("子盒子")
},
//或者
clickSonBox(e){
e.cancelBubble=true
alert("子盒子")
},
方法2:使用事件修饰符stop
绑定事件时,使用stop修饰符阻止事件冒泡
<div class="father-box" @click="clickFatherBox">我是父盒子
<div class="son-box" @click.stop="clickSonBox">
我是子盒子
</div>
</div>
方法3:使用事件修饰符self
绑定事件时,使用self修饰符 表示只在本元素被点击时触发
<div class="father-box" @click.self="clickFatherBox">
我是父盒子
<div class="son-box" @click="clickSonBox">
我是子盒子
</div>
</div>
注意:
self修饰符应该在父盒子绑定事件时使用而不是子盒子! 在父盒子事件使用self,点击了子盒子,父盒子的点击事件不会被触发,即事件没有冒泡,文章来源:https://www.toymoban.com/news/detail-589488.html
self表示只在当前元素发生事件时,事件才触发文章来源地址https://www.toymoban.com/news/detail-589488.html
到了这里,关于快速了解4种阻止事件冒泡的方法(原生js阻止,vue中使用修饰符阻止)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!