JavaScript的事件冒泡是指事件触发后，会从最内层的触发元素开始，依次向上传播到父元素、祖父元素，直到最外层的document对象。这种机制在很多场景下能简化事件绑定逻辑，但也会带来子元素点击意外触发父元素事件的问题，需要针对性处理。
事件冒泡的原理
当我们在页面中点击一个嵌套结构的元素时，浏览器会先执行该元素上绑定的对应事件处理函数，然后再执行其父元素上绑定的同类型事件处理函数，这个过程就是事件冒泡。比如下面的嵌套结构：
<div class="parent"> 父元素 <button class="child">子按钮</button> </div>
如果给parent和child都绑定了click事件，点击子按钮时，会先触发child的click事件，再触发parent的click事件，这就是冒泡带来的效果。
阻止事件冒泡的常用方法
1. 使用stopPropagation方法
这是最常用的阻止事件冒泡的方式，在事件处理函数中调用事件对象的stopPropagation()方法，就可以阻止事件继续向上传播。
// 获取父元素和子元素
const parent = document.querySelector('.parent');
const child = document.querySelector('.child');
// 给父元素绑定点击事件
parent.addEventListener('click', function() {
console.log('父元素被点击了');
});
// 给子元素绑定点击事件，阻止冒泡
child.addEventListener('click', function(e) {
e.stopPropagation(); // 阻止事件向上传播
console.log('子元素被点击了');
});此时点击子按钮，只会输出子元素的提示，不会触发父元素的点击事件。
2. 使用cancelBubble属性
在早期浏览器中，也可以通过设置事件对象的cancelBubble属性为true来阻止冒泡，不过这种方式现在更推荐用stopPropagation替代，兼容性上stopPropagation已经覆盖了绝大多数现代浏览器。
child.addEventListener('click', function(e) {
e.cancelBubble = true; // 旧方式阻止冒泡
console.log('子元素被点击了');
});注意事项
stopPropagation只能阻止事件向上传播，不会阻止当前元素其他同类型事件处理函数的执行。- 如果需要在阻止冒泡的同时，阻止当前元素的默认行为（比如a标签的跳转），可以搭配使用
preventDefault方法，或者直接使用return false（仅jQuery中同时包含阻止冒泡和默认行为，原生JS中return false只阻止默认行为）。 - 在事件委托场景中，如果要避免子元素触发父元素的委托事件，可以在父元素的事件处理函数中判断事件目标，不是目标子元素时直接返回，不需要调用阻止冒泡的方法。
事件委托中的冒泡处理示例
事件委托通常利用冒泡机制，把子元素的事件绑定到父元素上，此时如果需要区分不同子元素的行为，可以通过事件对象的target属性判断：
parent.addEventListener('click', function(e) {
// 如果点击的是子按钮，执行子元素的逻辑，不触发其他父元素相关操作
if (e.target.classList.contains('child')) {
console.log('点击的是子按钮，执行子逻辑');
return; // 直接返回，不执行后续父元素的通用逻辑
}
console.log('点击的是父元素其他区域，执行父逻辑');
});这种方式既利用了冒泡的便利性，又避免了不需要的父元素逻辑被触发。
JavaScript事件冒泡stopPropagation事件委托preventDefault修改时间：2026-06-03 22:24:38