快速了解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=truealert("子盒子")},

方法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中使用修饰符阻止）相关推荐

jquery中阻止事件冒泡的方法
2019独角兽企业重金招聘Python工程师标准>>> 根据<jquery基础教程> 第一种方法:判断事件的"直接"目标是否是自身,如果不是自身,不予 ...
JS_js阻止事件冒泡的方法
阻止方法有三种: 1.event.stopPropagation(); document.querySelector("#login").addEventListener(&quo ...
Js、Vue阻止事件冒泡行为
目录 Js阻止事件冒泡行为 Vue阻止事件冒泡行为以下是Js阻止事件冒泡行为 event.stopPropagation() <!DOCTYPE html> <html lang= ...
js第8章事件案例：获取触发事件的元素，阻止事件冒泡和默认行为的实现、缓动的小球、图片放大特效、按Enter键切换
目录 1.获取触发事件的元素,阻止事件冒泡和默认行为的实现. (1)获取触发事件的元素 (2)阻止事件冒泡 (3)阻止事件默认行为 2.缓动的小球,实现的原理是通过定时器连续地修改当前DOM元素的某个 ...
微信小程序阻止事件冒泡
在vue中阻止事件冒泡的方法使用的event.stopPropagation(); 但微信小程序中事件传递的event却没有stopPropagation()这个方法解决方案:将绑定事件的bindt ...
android 防止点击事件冒泡,移动端阻止事件冒泡需要注意！
移动端使用的js插件式zepto和touch,想要在一个大的区域做一个点击事件,但是里面小的区域也有自己的点击事件,就要阻止事件冒泡,但是使用了之后发现不好使,原因是:大的区域使用的事件是移动端的ta ...
阻止事件冒泡两种方式：event.stopPropagation();和return false;
jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...
JQuery 阻止事件冒泡---3种实现方式
第一种:return false: 缺点:直接返回了函数,函数后面的语句没法执行了: $('.btn').on('click',function(event){do something ...retu ...
jquery阻止事件冒泡的两种方法
事件的旅程: 当页面上发生一个事件时,每个层次上的DOM元素都有机会处理这个事件.以下面的页面模型为例: 1. <div class="foo">2. <span ...