阻止冒泡，项目中估计也经常会用到，可以用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树最上层。 目标元素：任何一个事件的目标元素...
// 不仅阻止冒泡，也阻止了事件本身 }); }); <div id="ee">aaaaa <a href="baidu.com">baidu.com</a> ``` 在这个例子中，点击按钮时会触发多个事件处理函数，但通过使用`event.stopPropagation();`和`...
16-阻止冒泡.html
Vue框架中绑定事件的阻止冒泡失效问题解决方案 在Vue框架中，绑定事件的阻止冒泡失效问题是一个常见的问题。当我们使用Vue框架时，因为框架内部对DOM的处理，导致绑定事件的阻止冒泡失效。下面我们将探讨这个问题的...
总结来说，zepto.js中虽然tap事件不支持直接阻止冒泡，但是我们可以通过事件委托的方式，在document级别处理tap事件，然后通过判断事件的目标元素来间接实现阻止冒泡的效果。这样做可以在不改变tap事件特性的前提下...
React中的事件冒泡和阻止冒泡是前端开发中常见的概念，尤其在构建复杂交互的组件时显得尤为重要。事件冒泡是指事件从最深的节点开始，逐级向上传播到父节点，直到到达文档的根节点。在React中，由于其虚拟DOM的事件...
标题中的“阻止滚动条事件冒泡”指的是在用户滚动页面某个部分时，阻止这个滚动事件向上传递到其他元素或窗口，特别是阻止`mousewheel`事件的冒泡。`mousewheel`事件通常用于处理鼠标滚轮滚动的行为，它在用户滚动...
vue绑定的点击事件阻止冒泡的实例 在本篇文章中，我们将探讨如何在 Vue 中绑定点击事件，并阻止事件冒泡。事件冒泡是一种常见的事件机制，在 DOM 事件流中，事件会从最特定的事件目标到最不特定的事件目标...
3. **兼容性函数**：对于那些不支持`event.preventDefault()`的旧版浏览器（主要是IE），可以使用以下函数来阻止冒泡： ```javascript function stopDefault(e) { if (e && e.preventDefault) { e....
// 阻止冒泡，允许默认行为 event.stopPropagation(); }); ``` 在实际应用中，根据需求选择合适的阻止方式是非常重要的。例如，如果你想要在菜单项点击时显示/隐藏子菜单，同时防止点击触发菜单项的默认链接行为...
在实际的应用中，这两者常常结合使用，比如在一个下拉菜单的点击事件中，我们需要阻止冒泡以避免其他元素的事件处理器被触发，同时也需要阻止默认行为（如表单的提交动作）来防止页面刷新。 作者在文章中还提到了...
js阻止冒泡 在阻止冒泡的过程中，W3C和IE采用的不同的方法，那么我们必须做以下兼容。 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性，它的值比事件句柄的返回值...
此外，`event.stopPropagation()`方法可以阻止事件继续向上冒泡，而`event.stopImmediatePropagation()`则不仅可以阻止冒泡，还能阻止同一元素上的其他事件处理函数被执行。 总结一下，JavaScript事件冒泡是浏览器...
本文通过实例分析了如何在JavaScript中捕捉事件以及如何阻止冒泡事件。 事件冒泡是指事件在DOM（文档对象模型）树中从最具体的节点（子节点）向上级节点（父节点）传播的过程。当一个元素发生事件，如点击（onclick...