点击穿透的根本原因是遮罩层未切断事件流，正确做法是设 pointer-events: auto 并用 stopPropagation() 阻断冒泡，同时确保其在层叠上下文和 DOM 层级中真正覆盖目标元素。
点击穿透是因为遮罩层没真正拦截事件
移动端点击穿透的本质是：遮罩层虽然视觉上盖住了下面的元素，但 pointer-events 默认为 auto，且未显式阻止事件冒泡或捕获，导致点击“透”到下层可交互元素（比如按钮、链接）。这不是 CSS 渲染问题，而是事件分发逻辑没切断。
常见错误现象：
– 点击遮罩层后，底层按钮被触发
– 遮罩层用 display: none 或 visibility: hidden 临时隐藏时，再次显示后仍穿透
– 在 iOS Safari 中尤其明显，哪怕加了 touchstart 阻止默认行为也不管用
- 必须给遮罩层设
pointer-events: none—— 错！这是让遮罩完全不响应任何事件，用户连关闭遮罩都做不到 - 正确做法是设
pointer-events: auto（默认值）+ 显式监听并stopPropagation() - 更稳妥的是设
pointer-events: auto并确保遮罩层 DOM 节点在 z-index 和层级上真正覆盖目标区域 - 如果遮罩层内有可点击子元素（如关闭 × 按钮），它们需保持
pointer-events: auto，不能被父级继承阻断
pointer-events: none 和 auto 的实际影响差异
pointer-events: none 不仅让元素不响应点击，还会跳过整个事件捕获/冒泡流程——浏览器直接当它不存在。而 pointer-events: auto（或省略）才让元素参与事件流，你才能用 JS 控制它。
使用场景：
– 需要点击遮罩层关闭弹窗 → 必须用 auto，再绑定 click 处理器
– 只想遮挡、不允许任何交互（比如加载中蒙层）→ 可用 none，但得确认不需要关闭逻辑
立即学习“前端免费学习笔记（深入）”；
-
pointer-events: none下，touchstart/click都不会触发，也无法通过event.target捕获 -
pointer-events: auto是起点，后续靠 JS 阻断传播或判断点击位置是否在可操作区域内 - 部分安卓 WebView 对
pointer-events支持不稳定，建议搭配touch-action: none防止默认滚动干扰
移动端必须处理 touch 事件链，不能只靠 click
iOS 和部分安卓浏览器中，click 事件有约 300ms 延迟，且在遮罩层上触发时，底层元素可能已在延迟窗口内完成响应。只监听 click 无法可靠拦截。
实操建议：
– 同时监听 touchstart 和 click，并在 touchstart 中立即调用 event.preventDefault() 和 event.stopPropagation()
– 避免在遮罩层上使用 ontouchstart="return false" 这类内联写法，不易维护且易漏掉 click
- 不要只依赖
event.preventDefault()：它只阻止默认行为（如跳转），不阻止事件冒泡到下层 - 必须配
event.stopPropagation()才能切断穿透路径 - 若遮罩层由 Vue/React 动态渲染，确保事件监听器在挂载时绑定、卸载时清除，否则可能残留旧监听器
z-index 和 transform 导致的隐性层级失效
即使写了 pointer-events: auto，如果遮罩层因 transform、opacity 或父容器 z-index 不合理，仍可能在渲染树中未真正覆盖目标元素——这时点击事件会按“视觉上看似覆盖，实际 DOM 层级更低”的规则向下传递。
检查要点：
– 遮罩层父容器是否有 transform 或 filter？这会创建新层叠上下文，可能压不住兄弟节点中的可点击元素
– 底层内容是否用了 position: fixed 且 z-index 很高？它可能突破遮罩层的层叠上下文
- 给遮罩层加
position: fixed+top: 0+left: 0+width: 100vw+height: 100vh，比仅靠z-index更可靠 - 避免用
transform: translateZ(0)强制提升层级，它可能引发新的合成层，反而打乱预期顺序 - 用浏览器开发者工具的“Rendering > Paint flashing”或“Layers”面板确认遮罩层是否真正在最上层渲染
pointer-events 本身，而是它和层叠上下文、事件流、移动端 touch/click 双机制之间的隐性耦合。 
