事件冒泡是dom事件从目标元素逐级向上传播至document的默认机制；可用stopPropagation()阻止，stopImmediatePropagation()还能拦截同级监听器。
事件冒泡是什么现象
事件冒泡是浏览器默认的事件传播机制：当一个子元素上的事件被触发（比如 click），该事件会先在目标元素上执行，然后逐级向上传播到父元素、祖父元素，直到 document。这不是 bug，是 DOM 事件规范的一部分。
常见表现：
- 点击一个按钮，结果外层
div的点击回调也执行了 - 表格里点单元格，整行高亮、整个表格容器也响应了
- 弹窗内的按钮点击后，背后遮罩层意外关闭
用 Event.stopPropagation() 阻止冒泡
这是最直接的方式，在事件处理函数中调用它，就能切断当前事件继续向上传播的路径。
注意它只影响当前事件实例，不影响同一元素上其他监听器，也不影响默认行为（比如表单提交、链接跳转）。
立即学习“Java免费学习笔记（深入）”；
button.addEventListener('click', function (e) { console.log('按钮被点'); e.stopPropagation(); // ✅ 在这里调用 }); outerDiv.addEventListener('click', function () { console.log('外层 div 被点'); // ❌ 这行不会执行 });常见误用：
- 在异步回调里调用（如
setTimeout中）——此时事件早已传播完毕，无效 - 写在
return false后面——代码根本执行不到 - 和
preventDefault()混淆：后者只阻止默认动作，不阻止冒泡
return false 在 jquery 和原生中的区别
在原生 javaScript 中，return false 在事件处理函数里没有任何特殊效果，它既不阻止冒泡，也不阻止默认行为 —— 它只是让函数返回 false 值而已。
但在 jQuery 1.x/2.x 中，return false 等价于同时调用 e.preventDefault() 和 e.stopPropagation()。这个行为容易让人误解，尤其在混合使用 jQuery 和原生事件时。
建议统一用明确的方法：
- 阻止冒泡 →
e.stopPropagation() - 阻止默认行为 →
e.preventDefault() - 两者都要 → 分别调用，语义清晰
用 event.stopImmediatePropagation() 拦截同级监听器
如果一个元素绑定了多个同类型事件监听器（比如两个 click），stopPropagation() 只影响父级，不影响同级后续监听器；而 stopImmediatePropagation() 会立即终止所有后续监听器（包括同级和上级）。
btn.addEventListener('click', () => console.log('第一个监听器')); btn.addEventListener('click', (e) => { console.log('第二个监听器'); e.stopImmediatePropagation(); // ✅ 阻止第三个监听器 }); btn.addEventListener('click', () => console.log('第三个监听器')); // ❌ 不会执行这个方法很少用，但当你需要确保某个条件满足后「彻底打断」所有后续响应（比如权限校验失败立即终止）时，比 stopPropagation() 更彻底。
真正容易被忽略的是：事件冒泡发生在捕获阶段之后、目标阶段之后；如果你用 addEventListener 的第三个参数设为 true（即捕获模式），事件会先从外往内走——这时候 stopPropagation() 也能在捕获途中截停，但逻辑更难追踪。日常开发中，除非有明确需求，否则别轻易混用捕获和冒泡。