一文快速学会阻止事件冒泡的4种方法(原生js阻止,vue中使用修饰符阻止)
更新时间:2023年12月12日 10:53:32 作者:黄橘子panda
冒泡就是事件开始是由最具体的元素接收,然后逐层向上级传播到较为不具体的元素,这篇文章主要给大家介绍了关于阻止事件冒泡的4种方法,文中介绍的方法分别是原生js阻止以及vue中使用修饰符阻止的相关资料,需要的朋友可以参考下
阻止事件冒泡的方法
前端结构
<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,点击了子盒子,父盒子的点击事件不会被触发,即事件没有冒泡,
self表示只在当前元素发生事件时,事件才触发
总结
到此这篇关于阻止事件冒泡的4种方法(原生js阻止,vue中使用修饰符阻止)的文章就介绍到这了,更多相关前端阻止事件冒泡方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue基础之v-bind属性、class和style用法分析
这篇文章主要介绍了vue基础之v-bind属性、class和style用法,结合实例形式分析了vue.js中v-bind绑定及class、style样式控制相关操作技巧,需要的朋友可以参考下2019-03-03vue中PC端使用高德地图实现搜索定位、地址标记、弹窗显示定位详情(完整实例)
这篇文章主要介绍了vue中PC端使用高德地图实现搜索定位、地址标记、弹窗显示定位详情,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
最新评论