JavaScript事件冒泡是什么？如何阻止它

为什么 event.stopPropagation() 不总能解决问题

调用 event.stopPropagation() 确实能阻止冒泡，但它只影响「当前事件监听器之后的冒泡路径」，不影响同一元素上其他监听器的执行，也不影响捕获阶段。容易误判的点：

• 多个 addEventListener 绑定在同一元素上时，stopPropagation 对它们彼此无影响
• 如果父元素监听器用了 { capture: true }，它其实在冒泡前就执行了，stopPropagation 拦不住它
• 在框架（如 React）中直接操作原生事件，stopPropagation 可能干扰合成事件机制，导致 onClick 失效

什么时候该用 event.stopImmediatePropagation()

当你需要彻底中断当前事件流——包括同一元素上尚未执行的其他监听器——就得用 stopImmediatePropagation。常见于插件或组件封装场景：

button.addEventListener('click', e => {
  console.log('第一个监听器');
  e.stopImmediatePropagation(); // 后面这个监听器不会执行
});
button.addEventListener('click', e => {
  console.log('第二个监听器'); // ← 永远不会输出
});

注意：stopImmediatePropagation 也会同时阻止冒泡，但它比 stopPropagation 更“激进”。别滥用，尤其在第三方库集成时，可能意外截断别人依赖的事件流。

冒泡对 event.target 和 event.currentTarget 的影响

这是最容易混淆的两个属性：

• event.target 始终是**最初触发事件的元素**（比如你点的是 ，哪怕监听器绑在
  上）
• event.currentTarget 是**当前正在执行监听器的那个元素**（即 this 的值），随冒泡过程变化

所以，在委托场景里判断真实点击位置，必须用 event.target；而想统一处理父容器逻辑，靠 event.currentTarget 更安全。漏掉这点，常导致「明明点了子项，却误判成点了空白处」。

理论要掌握，实操不能落！以上关于《JavaScript事件冒泡是什么？如何阻止它》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！