事件冒泡是DOM事件从子元素向父元素逐级传播的现象；stopPropagation()可阻止后续冒泡路径，但不影响捕获阶段监听器、同元素其他监听器及默认行为。
事件冒泡是什么现象
事件冒泡是 DOM 事件传播的默认行为：当子元素上的事件被触发时，该事件会沿着 DOM 树逐级向上传播到父元素、祖先元素，直到 document。比如点击一个 <button>，它的父 <div>、外层 <section>、<body> 都会依次收到这个 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()：
立即学习“Java免费学习笔记（深入）”；
btn.addEventListener('click', () => console.log('1st'));
btn.addEventListener('click', (e) => {
console.log('2nd');
e.stopImmediatePropagation(); // ✅ 后续同级监听器不会执行
});
btn.addEventListener('click', () => console.log('3rd')); // ❌ 不会打印
在事件委托中，更推荐用 event.target 判断来源，而不是盲目阻止冒泡——因为委托本就依赖冒泡才能工作。真正要阻止的，往往是特定条件下的传播，比如仅当点击的是某个图标时才中断。
冒泡机制本身不是 bug，它是事件委托的基础。乱用 stopPropagation() 容易导致上层逻辑收不到事件，尤其在用第三方 UI 组件库时，它们可能依赖冒泡做内部通信。动手前先确认：你真的需要掐断整条链路，还是只需过滤掉某些目标？
