遮罩层点击穿透失败的根本原因是错误地给非直接覆盖元素设置 pointer-events: none；必须仅对真正覆盖目标的遮罩元素本身设置该属性，且需确保其渲染尺寸有效、不被伪元素干扰，移动端还需同步处理 touch 事件链。
遮罩层点击穿透失败，大概率是加错了元素
直接给 .mask 加 pointer-events: none 才有效，不是给按钮、不是给 body、也不是给父容器。浏览器只检查「当前被点中的那个元素」是否为 none，它不向上或向下推导——哪怕 DOM 结构里它套了十层，只要点中的是它自己，且值为 none，事件就往下透。
常见错误：用一个全屏 div 包住弹窗和关闭按钮，然后给这个 div 设 pointer-events: none，结果按钮也点不了。这是因为按钮是它的子元素，而父级设了 none 后，整棵子树在事件捕获阶段就被跳过，pointer-events: auto 在子元素上完全无效。
- 真正盖住目标的元素才需要设
pointer-events: none - 检查该元素是否真的在渲染树中「覆盖」了目标：用开发者工具的「Toggle element screenshot」看实际 hit-area
- 绝对定位元素若没设
width/height或top/left，可能尺寸为 0，视觉上盖住了，实际没占位
遮罩里要放关闭按钮，不能靠“父设 none + 子设 auto”救
pointer-events: none 是硬性跳过，不是“让权”。一旦父元素设了它，子元素无论写什么值（包括 auto、visible）都收不到事件。这不是 bug，是规范行为。
正确做法只有两种：
- 把关闭按钮移出遮罩层 DOM 树，例如用 React Portal 渲染到
下，再用z-index控制层级 - 只对遮罩层中「非按钮区域」设
pointer-events: none，按钮所在区域保持auto（比如用伪元素或额外 div 覆盖周边）
别碰 ::before 或 ::after ——它们也是独立节点，若没显式设 pointer-events: none，会单独捕获事件，导致穿透失败。
移动端点击穿透失效，往往卡在 touch 事件链上
iOS Safari 和部分安卓 WebView 对 pointer-events: none 的支持看似一致，但底层事件链不同：click 有 300ms 延迟，而 touchstart 是即时的。如果只监听 click，用户点遮罩时底层元素可能已在延迟窗口内响应。
必须同时处理：
- 在遮罩层上监听
touchstart并立即调用event.preventDefault()和event.stopPropagation() - 避免用内联
ontouchstart="return false"，它无法阻止冒泡，且难调试 - 搭配
touch-action: none防止滚动干扰（尤其当遮罩下是可滚动列表时）
注意：安卓某些厂商 WebView（如华为、小米）对 input[type="file"] 的穿透支持极差，pointer-events: none 常被忽略，此时只能 JS 临时移除遮罩 DOM。
动画中切换 pointer-events 容易漏掉中间帧
用 opacity 做淡入淡出时，如果只在初始态设 pointer-events: none、结束态切回 auto，那过渡中间帧（比如 opacity=0.3）仍为 auto，用户就可能点中半透明状态下的底层元素。
可靠做法：
- 动画开始前立即设
pointer-events: none - 动画结束回调里再切回
auto（或移除该声明） - 不要和
visibility: hidden混用——它不影响事件流，加了等于白加
最易被忽略的是：CSS 动画本身不触发重排，但 pointer-events 切换是即时生效的；若 JS 动画库（如 Framer Motion）没同步控制该属性，就会出现视觉已出现、但点击仍穿透的错觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
