一、JS阻止冒泡
我们首先来看一下JS中如何阻止事件冒泡。在JS中我们可以使用Event对象的stopPropagation方法，来阻止事件向父级元素传递，代码如下：
document.getElementById('child').addEventListener('click', function(event){
event.stopPropagation();
console.log('我点击了子元素！');
});
document.getElementById('parent').addEventListener('click', function(){
console.log('我点击了父元素！');
});
运行结果：当我们在子元素上点击时，只有子元素的事件被触发，父元素的事件不会被触发。
二、JQ阻止冒泡和默认事件
JQ库为我们提供了一个方便的事件处理函数：e.stopPropagation()和e.preventDefault()。其中e.stopPropagation()功能和JS中stopPropagation()一样，用于阻止事件冒泡。而e.preventDefault()则用来阻止事件的默认行为，例如阻止a标签的跳转。代码如下：
$('#child').click(function(e){
e.stopPropagation();
console.log('我点击了子元素！');
});
$('#parent').click(function(e){
console.log('我点击了父元素！');
});
$('a').click(function(e){
e.preventDefault();
})
运行结果：当我们在子元素上点击时，只有子元素的事件被触发，父元素的事件不会被触发；当我们点击a标签时，不会跳转到链接的地址。
三、Vue阻止冒泡事件
在Vue中，我们可以使用v-on的修饰符.stop阻止事件向上传播，代码如下：
原创文章，作者：XKNSI，如若转载，请注明出处：https://www.506064.com/n/329515.html
微信扫一扫 
支付宝扫一扫 