事件冒泡是DOM事件从子元素向父元素逐级传播的现象；stopPropagation()可阻止后续冒泡路径，但不影响捕获阶段监听器、同元素其他监听器及默认行为。
事件冒泡是什么现象
事件冒泡是 DOM 事件传播的默认行为：当子元素上的事件被触发时，该事件会沿着 DOM 树逐级向上传播到父元素、祖先元素，直到 能，但要注意作用范围和时机： 常见原因有三个： 当一个元素绑了多个同类型监听器，且只想让第一个执行、其余全部跳过，用 立即学习“Java免费学习笔记（深入）”； 在事件委托中，更推荐用 冒泡机制本身不是 bug，它是事件委托的基础。乱用 document。比如点击一个 ，它的父 、 都会依次收到这个 click 事件（前提是它们绑了监听器）。
event.stopPropagation() 能彻底阻止冒泡吗
{once: true}）setTimeout 中调用已无效）event.preventDefault()
button.addEventListener('click', function(e) {
console.log('按钮被点');
e.stopPropagation(); // ✅ 此时冒泡立刻中断
});
parentDiv.addEventListener('click', function() {
console.log('父 div 收不到 click'); // ❌ 不会执行
});
为什么有时
stopPropagation() 像没起作用
addEventListener 且第三个参数为 true（捕获阶段），它会在冒泡前就执行，此时子元素调用 stopPropagation() 对它无效dispatchEvent 手动派发，但没设置 bubbles: true）event.target 的事件对象而非实际触发监听的那个替代方案：
event.stopImmediatePropagation() 和委托场景stopImmediatePropagation()：btn.addEventListener('click', () => console.log('1st'));
btn.addEventListener('click', (e) => {
console.log('2nd');
e.stopImmediatePropagation(); // ✅ 后续同级监听器不会执行
});
btn.addEventListener('click', () => console.log('3rd')); // ❌ 不会打印
event.target 判断来源，而不是盲目阻止冒泡——因为委托本就依赖冒泡才能工作。真正要阻止的，往往是特定条件下的传播，比如仅当点击的是某个图标时才中断。stopPropagation() 容易导致上层逻辑收不到事件，尤其在用第三方 UI 组件库时，它们可能依赖冒泡做内部通信。动手前先确认：你真的需要掐断整条链路，还是只需过滤掉某些目标？
