事件冒泡是设计机制而非bug，指事件从目标元素逐级向上传播至document的过程，支持事件委托等重要功能；阻止需用stopPropagation()，乱用会破坏依赖冒泡的全局逻辑。
事件冒泡不是 bug，是设计机制；阻止传播只需 event.stopPropagation()，但乱用会破坏事件委托和全局逻辑。
什么是事件冒泡：点击按钮，为什么 div 也“被点”了？
当你点击一个嵌套在 在事件处理函数里调用 典型需求是「划清事件作用域」：你只想让某一层逻辑响应，不让上层误判。常见真实场景包括： 立即学习“Java免费学习笔记（深入）”； ⚠️ 注意：过度阻止会破坏依赖冒泡的功能，比如全局点击收起所有弹窗、分析埋点统一监听、无障碍辅助工具捕获交互等。 真正难的不是怎么写，而是判断该不该阻——冒泡本身是协作机制，打断它之前，先想想有没有更优雅的方式，比如用 ，浏览器默认会按顺序触发：按钮 → div → body → document。这个“从内往外传”的过程就是事件冒泡。它让父元素能统一响应子元素操作（比如表格里点任意单元格，整行高亮），也是事件委托（如给 ）的底层基础。
click、mousedown、keydown 等）focus、blur、mouseenter、mouseleave 默认不冒泡document（不是 window）怎么阻止冒泡：只用
stopPropagation()，别信 return false
event.stopPropagation()，就能立刻切断当前事件向上传播的路径。它只影响这次事件流，不影响同元素其他监听器执行，也不碰默认行为（比如点击链接仍会跳转）。
return false 在原生 JS 中完全无效——它只是让函数返回 false，既不阻止冒泡，也不阻止默认行为return false 确实等价于 preventDefault() + stopPropagation()，但混用时极易出错event.cancelBubble = true，现代项目基本不用考虑button.addEventListener('click', function(e) {
console.log('按钮被点');
e.stopPropagation(); // ✅ 正确写法
});
outerDiv.addEventListener('click', () => console.log('这行不会执行'));
什么时候该阻止？哪些场景真需要它？
preventDefault() 屏蔽浏览器默认菜单还有两个易混淆方法：
preventDefault() 和 stopImmediatePropagation()
preventDefault() 和冒泡无关，它只管“做不做默认动作”：点击链接不跳转、表单不提交、空格键不切换 checkbox。而 stopImmediatePropagation() 更激进——它不仅阻止冒泡，还会让同一元素上**后续注册的同类型监听器全部失效**。
e.preventDefault() 和 e.stopPropagation()
click 监听器共存，且希望前一个执行完就终止其余？用 stopImmediatePropagation()
stopImmediatePropagation()，它会让调试和协作变得困难event.target 精准识别点击源，或改用事件委托集中管理。
