点击穿透需作用于真正遮挡元素本身，父设pointer-events:none会使子元素auto失效，应抽离交互控件为兄弟节点或用伪元素模拟遮罩。
直接给遮挡层加 pointer-events: none 就能实现点击穿透，但复杂层叠下容易失效——关键不在“加不加”，而在“加给谁”、是否被祖先干扰、以及局部交互如何保留。
必须作用于真正遮挡的元素本身
穿透只对设置了 pointer-events: none 的那个元素生效，不会自动影响父容器或兄弟节点。如果遮罩是 .mask，而你却把该样式写在它的父容器 .dialog-wrapper 上，底层元素依然会被 .mask 拦截。
- 用 Chrome DevTools 的“Rendering”面板勾选 “Hit test borders”，直观确认哪一层实际覆盖了点击区域
- 浮动（
float）、绝对定位（position: absolute）或固定定位（position: fixed）的元素，只要视觉上盖住目标，就必须单独设pointer-events: none - 避免依赖
z-index推测事件流向：z-index 再高，没设none仍会拦截；z-index 再低，只要没被其他元素挡住且未设none，照样能响应
父级设 none 时，子元素无法靠 auto 挽救
一旦某个祖先元素（包括遮罩自身）设了 pointer-events: none，整棵 DOM 子树都会被浏览器跳过命中检测。此时子元素写 pointer-events: auto 完全无效。
- 典型错误：把关闭按钮放在
<div class="overlay" style="pointer-events:none"><button class="close">×</button></div>里，再给按钮加auto—— 点击无反应 - 正确做法：让关闭按钮脱离该容器结构，例如用 React Portal 渲染到
下，或改为同级元素：<div class="overlay"></div> <button class="close">×</button>，再用z-index和定位控制层级 - SVG 元素需单独检查：
<svg></svg>默认可交互，但内部的<g></g>或<path></path>可能被重置，须显式设回pointer-events: visiblePainted或auto
局部启用交互的可行方案
若遮罩整体需穿透，但某块区域（如右上角 × 按钮）必须响应，不能靠父子关系“修复”，得换结构或分区域控制。
- 将需要交互的控件抽离为遮罩的兄弟元素，用相同定位上下文 + 更高
z-index叠加，确保它在遮罩上方但不在其 DOM 子树中 - 用伪元素模拟遮罩背景：把半透明背景用
::before生成，并对其设pointer-events: none；真实按钮作为主元素保留默认行为 - 对遮罩使用
background而非子<div> 块：避免多一层嵌套带来的继承干扰，也更轻量 <h3>移动端与兼容性避坑要点</h3> <p>多数现代浏览器支持良好，但真机环境有细节差异，尤其在滚动容器或 WebView 中。</p> <ul> <li>iOS Safari 在 <code>overflow: scroll容器内，若遮罩设了pointer-events: none但同时父容器有touch-action: none，可能失效；建议同步检查并移除不必要的touch-action - 微信内置 WebView 对
fixed元素上的pointer-events支持不稳定，可加一层空<div> 作为透传代理，样式设为 <code>position: fixed; pointer-events: none; top:0; left:0; width:100%; height:100% - IE11 对 HTML 表单元素（
<button></button>、<input>）的none支持不一致，必要时降级为display: none配合 JS 控制显隐
