事件冒泡是DOM事件从目标元素逐级向上传播至document的默认行为；可用event.stopPropagation()阻止，它仅停止冒泡而不影响同一元素其他监听器或默认行为。
事件冒泡是什么？
事件冒泡是 DOM 事件传播的默认行为之一：当一个子元素上的事件被触发（比如 click），该事件会先在目标元素上执行，然后逐级向上传播到父元素、祖父元素，直到 document。这不是 bug，是浏览器规范定义的行为。
常见现象包括：点击按钮时，同时触发了外层 <code>div 的 click 处理函数；表单内点击输入框却意外提交了整个表单；下拉菜单点击选项后立刻收起——因为点击穿透到了遮罩层或容器。
如何用 stopPropagation() 阻止冒泡
最直接的方式是在事件处理函数中调用 event.stopPropagation()。它只阻止当前事件继续向上冒泡，不影响同一元素上其他监听器的执行，也不阻止默认行为（如链接跳转、表单提交）。
注意：必须在事件处理函数内部调用，且仅对当前事件对象有效。
立即学习“Java免费学习笔记（深入）”；
button.addEventListener('click', function (e) {
console.log('按钮被点击');
e.stopPropagation(); // ✅ 关键这行
});
container.addEventListener('click', function () {
console.log('容器被点击'); // ❌ 这行不会执行
});- 仅对原生 DOM 事件有效；React/Vue 等框架的合成事件需用对应方式（如 React 中也是
e.stopPropagation()，但底层已封装） - 不能在事件监听器外部调用，比如写成
someEvent.stopPropagation()而不传入e参数会报错Cannot read property 'stopPropagation' of undefined - 如果用了
addEventListener的第三个参数useCapture: true，则事件在捕获阶段触发，此时stopPropagation()仍可阻止后续的冒泡阶段，但无法阻止捕获阶段继续向下
stopImmediatePropagation() 和 preventDefault() 的区别
这三个方法常被混淆，但作用完全不同：
-
stopPropagation()：只停冒泡，不停其他监听器，也不影响默认行为 -
stopImmediatePropagation()：不仅停冒泡，还阻止**同一事件阶段**（捕获或冒泡）中**尚未执行的其他监听器**。比如给同一个按钮绑了两个click监听器，第二个不会运行 -
preventDefault()：只阻止默认行为（如a标签跳转、form提交），完全不干涉事件传播路径
典型误用：阻止链接跳转却写了 <code>e.stopPropagation()，结果链接照跳；想禁用多个监听器却只用了 <code>preventDefault()，结果其他 handler 还是执行了。
兼容性与现代替代方案
stopPropagation() 在所有现代浏览器和 IE9+ 中都支持。IE8 及更早版本只支持 cancelBubble = true 写法：
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true; // IE8-
}不过现在基本无需兼容 IE8，除非维护非常老的系统。另外，CSS 层面也有辅助手段：比如设置 pointer-events: none 可让元素不响应任何鼠标事件（包括冒泡源头），但它会影响整个交互逻辑，不是“阻止冒泡”，而是“移除事件源”。
真正容易被忽略的是：**事件委托场景下，阻止冒泡的位置很关键**。比如用 ul 监听所有 li 的点击，又在某个 li 内部有删除按钮——若在按钮点击时没调用 stopPropagation()，事件会冒泡到 ul，可能触发选中整项逻辑。这时候阻止点必须落在按钮的 handler 里，而不是随便哪个外围节点上。
