阻止冒泡，项目中估计也经常会用到，可以用stopPropagation方法或设置cancelBubble
<html>
<head>
<style>
#outer{
width: 200px;
height: 200px;
background: #F08738;
}
#mid{
width: 150px;
height: 150px;
background: #293484;
}
#inner{
width: 100px;
height: 100px;
background: #783948;
}
#target{
width: 50px;
height: 50px;
background: #98fe99;
}
</style>
</head>
<body>
<div id="outer">
<div id="mid">
<div id="inner">
<div id="target"></div>
</div>
</div>
</div>
<script>
var o = document.getElementById('outer');
var m = document.getElementById('mid');
var i = document.getElementById('inner');
var t = document.getElementById('target');
o.addEventListener('click', function(){console.log('outer bubble')}, false);
m.addEventListener('click', function(){console.log('mid bubble')}, false);
i.addEventListener('click', function(event){
event.stopPropagation();
console.log('inner bubble');
}, false);
t.addEventListener('click', function(){console.log('target bubble')}, false);
</script>
</body>
</html>
点击target结果是
target bubble
inner bubble
可以看到只执行了target, inner两个div的click函数，在inner的click函数中调用了event.stopPropagation();则上层的div的click函数不会再执行了，成功阻止了事件冒泡，如果在ie中，写法是event.cancelBubble = true
可是后来发现stopPropagation不仅能阻止冒泡，还能阻止捕获，看代码
o.addEventListener('click', function(){console.log('outer bubble')}, false);
o.addEventListener('click', function(){console.log('outer')}, true);
m.addEventListener('click', function(){console.log('mid bubble')}, false);
m.addEventListener('click', function(event){
console.log('mid');
event.stopPropagation();
}, true);
i.addEventListener('click', function(){console.log('inner bubble')}, false);
i.addEventListener('click', function(){console.log('inner')}, true);
t.addEventListener('click', function(){console.log('target bubble')}, false);
t.addEventListener('click', function(){console.log('target')}, true);
点击target可以看到只显示的outer mid的捕获阶段的click事件，后续inner, target以及冒泡阶段的事件都没有执行。
W3C上对stopPropagation的解释是
“不再派发事件。
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。”
相关推荐
jquery阻止冒泡的所有方法，适合初学jquery者，是一篇很好的学习文稿
js阻止冒泡 $(document).click(function(){ $(".scxl").children('ul').hide(); })
js阻止冒泡事件的方法有2种。 事件冒泡：当一个元素上的事件被触发时，同样的事件会在那个元素的所有祖先元素中被触发。 这个事件是从原始元素开始一直冒泡到DOM树最上层。 目标元素：任何一个事件的目标元素...
16-阻止冒泡.html
js阻止冒泡及jquery阻止事件冒泡示例介绍.docx
而这次遇到的问题则是，原本绑定事件中（该函数没有写在vue实例的methods中），导致阻止冒泡事件失效了。无论是return false 还是event.stopPropagation();都无效。 此时需要通过用VUE提供了事件修饰符来处理，比如...
阻止滚动条事件mousewheel冒泡,当网页内部元素滚动条到顶或底时不触发浏览器窗口的滚动条事件。
主要介绍了jQuery中阻止冒泡事件的方法介绍,需要的朋友可以参考下
主要介绍了React冒泡和阻止冒泡的应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
本篇文章主要介绍了JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法，具有一定的参考价值，有兴趣的可以了解一下。
下面小编就为大家分享一篇vue绑定的点击事件阻止冒泡的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js阻止冒泡 在阻止冒泡的过程中，W3C和IE采用的不同的方法，那么我们必须做以下兼容。 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性，它的值比事件句柄的返回值...
主要为大家详细介绍了js阻止冒泡和默认事件，即默认行为,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法。分享给大家供大家参考。具体如下： 最近在弄一个手机版的网站，本来想用jQuery Mobile，但文件太大了，所以用了zepto.js 由于移动网页中使用click事件会有延迟...
本文实例讲述了angular ngClick阻止冒泡使用默认行为的方法。分享给大家供大家参考，具体如下： 这其实是一个很简单的问题，如果你认真查看过Angular官方的API文档，本来不想记录的。但是这个问题不止一次的被人问起...
2：在当今的各个浏览器中都支持事件的冒泡，所谓的冒泡可以这样理解： 条件：外层有一个DIV元素，在内层有一个P元素，他两存在这样的关系:DIV是P元素的父元素，而P是外层DIV的子元素，他们之间存在包含和被包含...
代码如下:function stopBubble(e){ if(e&&e.stopPropagation){//非IE e.stopPropagation();...如果要阻止默认事件的触发，即默认的href事件，那么就需要调用如下函数： 代码如下:function stopD