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