事件冒泡本质是事件从目标元素逐级向上传播，控制关键在于按需拦截、分层响应、统一收口：仅在展开/折叠、关闭图标等不该影响父级的操作点调用stoppropagation()；优先使用事件委托替代层层绑定；结合css层级与js定位防穿透；对contenteditable等场景在keydown阶段拦截并阻止默认行为。
多层嵌套触发事件冒泡，本质是事件从目标元素逐级向上传播到祖先节点。控制的关键不是“消灭冒泡”，而是按需拦截、分层响应、统一收口——既保留事件流的天然优势，又避免重复执行或逻辑错乱。
只在真正需要隔离交互的地方调用 stopPropagation()
不是所有点击都要阻止冒泡，而是聚焦于“不该影响父级”的操作点：
- 展开/折叠按钮、关闭 × 图标、下拉箭头等控件，点击后应只触发本层逻辑
- Vue 中用
@click.stop，React 中在 handler 里写e.stopPropagation() - 避免在容器整体上监听 click 并调用 stopPropagation()，否则内部按钮、链接等交互会失效
用事件委托替代层层绑定
当嵌套结构动态生成（如菜单、弹窗、树形列表），不要给每个子项单独绑事件：
- 统一监听父容器或 document 的 click 事件
- 用
e.target.closest('.js-action-btn')判断是否命中可操作元素 - 再根据 data 属性或 class 区分行为类型，比如
data-action="expand"或data-action="delete" - 这样既减少内存占用，又避免因 DOM 变动导致监听丢失
靠 CSS 层级 + JS 定位双保险防穿透
视觉遮挡和 DOM 结构不一致时，冒泡看似“穿”了，实则是点击没落到预期元素：
- 给非交互层（遮罩、背景板）设
pointer-events: none - 活跃的容器设
z-index动态提升，并确保有position: relative或absolute - 在捕获阶段监听：
document.addEventListener('click', handler, true) - 用
document.elementFromPoint(e.clientX, e.clientY)拿到实际被点中的元素，再.closest('.modal')找归属容器，比单纯依赖冒泡路径更可靠
对 contenteditable 等特殊场景做 keydown 拦截
富文本编辑器嵌套时回车重复换行，问题出在 keydown 冒泡而非 click：
- 监听
keydown而非input或keyup（后者已无法阻止默认行为） - 判断
e.key === 'Enter'且e.target属于当前编辑器范围 - 立即调用
e.preventDefault()和e.stopPropagation() - 不要等事件冒泡上去再处理，那时换行动作可能已被执行多次
不复杂但容易忽略
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
