加 pointer-events: none 仍点不透的主因是属性加错 DOM 节点——它仅对声明元素生效，不继承、不传播；遮罩类名 .mask 却设在父容器 .dialog 上，或伪元素未单独设置，或遮罩尺寸为 0，均导致无效。
直接给遮罩层本身加 pointer-events: none 就能穿透点击，但必须加在真正盖住目标的那一个元素上，加错位置、加在父容器或伪元素上都无效。
为什么加了 pointer-events: none 还是点不透？
最常见原因是加错了 DOM 节点——该属性只对声明它的那个元素生效，不继承、不传播、不跳过子树。
- 遮罩类名是
.mask，却写在了它的父容器.dialog上 →.mask本身仍是auto，照常拦截 - 用
::before或::after画遮罩，但没在伪元素选择器里设pointer-events: none→ 它们默认参与事件流，独立吃点击 - 遮罩元素尺寸为 0（比如没设
width/height，或被overflow: hidden裁掉）→ 视觉上“盖着”，实际没 hit-area - 右键点击失效区域 → “检查元素”，跳转到的节点就是真正在挡路的那个，优先查它
遮罩里有关闭按钮，怎么让它可点？
pointer-events: none 是硬性跳过：父元素设了，整棵子树在事件捕获阶段就被忽略，子元素写 pointer-events: auto 完全无效。
- 把按钮提为遮罩的兄弟节点：
<div class="mask"></div> <button class="close">×</button>，再用z-index和position: absolute控制视觉层级 - 用 Portal 渲染（React/Vue）把按钮挂到
下，彻底脱离遮罩 DOM 树 - 只对遮罩的“非按钮区域”设
pointer-events: none，按钮所在区域保持auto（需配合clip-path或额外定位容器）
移动端和动画场景下容易踩哪些坑？
iOS Safari 和部分安卓 WebView 对 pointer-events: none 的行为不一致，尤其涉及输入框和 touch 事件链时。
立即学习“前端免费学习笔记（深入）”；
- 若
none层下面压着<input type="text">，旧版 Safari 可能连软键盘都不弹 -
pointer-events: none对touchmove和滚动无作用，需额外给底层滚动容器动态加pointer-events: none防止滚动穿透 - 避免用
transition动画切换pointer-events值——部分安卓 WebView 会卡在中间态，导致事件丢失 - 动画中用
opacity淡入时，必须在动画开始前立即设pointer-events: none，结束回调里再切回auto，否则半透明帧仍可能被点中
真正容易被忽略的是：多个 pointer-events: none 层叠时，事件穿透顺序不是按 DOM 顺序，而是严格按渲染树绘制顺序；排查时别只盯 CSS，得打开 DevTools 的「Rendering」面板勾选 Hit test borders，一眼看出哪一层实际覆盖了点击区域。
