加了 pointer-events: none 还点不透，最常见原因是加错目标元素：该属性只对声明它的 DOM 节点生效，不继承、不传播、不跳过子树；伪元素需单独设置；子元素设 auto 无效；移动端存在兼容性问题。
直接给遮挡层加 pointer-events: none，但必须加在真正盖住目标的那个元素上，否则无效。
为什么加了 pointer-events: none 还点不透？
最常见原因是加错目标元素：这个属性只对声明它的那个 DOM 节点生效，不继承、不传播、不跳过子树。比如遮罩是 .mask，你却写在了它的父容器 .dialog 上，那 .mask 本身仍拦截点击。
- 用 Chrome DevTools 的「Rendering」面板勾选
Hit test borders，一眼看出哪一层实际覆盖了点击区域 - 右键点击失效区域 → 「检查元素」，跳转到的节点大概率就是真正在挡路的那个
- 打开「Computed」面板搜
pointer-events，确认值确实是none（哪怕带删除线，也说明被祖先设过） - 伪元素
::before和::after默认参与事件流，得单独加pointer-events: none
遮罩里有关闭按钮，怎么让它可点？
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 的行为不一致，尤其涉及 <input>、软键盘和 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 顺序；且 iOS Safari 在 overflow 容器内对 none 的响应可能有延迟——真机测试不能省。
