多层嵌套容器点击穿透本质是视觉遮挡与dom交互逻辑不一致，需用pointer-events和z-index对齐视觉-逻辑层级，并结合elementfrompoint+closest精准定位目标，再通过事件委托统一收口处理。
多层嵌套容器的点击穿透，本质不是“事件冒泡没拦住”，而是视觉遮挡与 DOM 交互逻辑不一致——比如上层 div 没设 pointer-events，或 z-index 错乱导致点击实际命中了下层元素。解决关键在于分层控制：用 CSS 隔离视觉层级，用 JS 精准判断点击归属，而不是单靠 e.stopPropagation() 补漏。
用 pointer-events 和 z-index 做视觉-逻辑对齐
这是最底层、最有效的防线。浏览器先按 pointer-events 决定“点得着谁”，再走事件流。如果上层容器本不该响应点击，就直接禁用它参与事件：
- 给当前激活的顶层容器设
pointer-events: auto（默认值，不用显式写） - 所有非激活的嵌套容器（包括 backdrop、遮罩层）统一设
pointer-events: none - 确保每个容器有
position: relative或absolute，并用动态 z-index 控制层级（如style.zIndex = 1000 + stackIndex） - 避免对
body或document设pointer-events: none，否则整个页面失活
用 elementFromPoint + closest 定位真实点击目标
当多个容器同级堆叠（比如两个 modal 并列），仅靠 z-index 不够可靠。需在 click 触发时主动查“用户真点到了哪个容器”：
- 监听
document.addEventListener('click', handler, true)（捕获阶段，早于冒泡） - 在 handler 中调用
document.elementFromPoint(e.clientX, e.clientY) - 用
.closest('.modal')或.closest('[data-modal-id]')找到所属容器 - 对比该容器是否为当前栈顶（如
modal.hasAttribute('data-active')），不是则e.preventDefault(); e.stopImmediatePropagation();
用事件委托统一收口，避免子组件各自 stopPropagation
下拉菜单、弹窗、悬浮面板等嵌套结构，不要让每个子项都调 stopPropagation()。那样容易漏、难维护，还破坏事件流自然性：
- 全局监听 document click，遍历所有活跃容器（
document.querySelectorAll('.js-dropdown.open, .modal.active')） - 对每个容器检查
container.contains(e.target)，只要有一个返回 true，说明点在内部，不执行关闭 - 只有当
e.target不在任何活跃容器内时，才统一触发收起逻辑 - 容器内部按钮、链接等保持静默，只做业务动作，不干预事件传播
注意特殊场景的穿透例外
有些“穿透”看起来像冒泡问题，实则是渲染或配置导致：
- SVG 中父
<g></g>设了pointer-events: none，子<circle></circle>却没设auto→ 子元素点不中 - Mapbox 图层重叠时，
queryRenderedFeatures返回多个图层 → 不是冒泡，是空间查询结果，需按feature.layer.id过滤 - 富文本
contenteditable嵌套时，回车键在每一层都触发换行 → 是 keydown 冒泡，应在最内层e.preventDefault()并阻止向上冒泡
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
