最常见原因是加错了目标元素——pointer-events: none只对声明它的dom节点生效，不继承、不传播、不跳过子树；遮罩是.mask却写在父容器.dialog上，则.mask仍拦截点击。
遮挡层加了 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）
opacity: 0 或 visibility: hidden 时还要加 pointer-events: none 吗？
要。这两个属性只控制“是否可见”，不改变事件捕获能力。opacity: 0 的元素照样响应 click、hover；visibility: hidden 的元素甚至仍能获得焦点。
必须三者配合：
-
opacity: 0（或visibility: hidden）负责视觉隐藏 -
pointer-events: none负责事件透传 - 动画场景优先选
opacity+pointer-events，因为opacity支持硬件加速，而visibility不支持过渡动画
移动端点击穿透有哪些特殊坑？
iOS Safari 和部分安卓 WebView 对 pointer-events: none 的行为不一致，尤其涉及 input、软键盘和 touch 事件链时。
关键注意事项：
- 若
none层下面压着<input type="text">，旧版 Safari 可能连软键盘都不弹 -
pointer-events: none对touchmove和滚动无作用，需额外给底层滚动容器加pointer-events: none防止滚动穿透 - 安卓某些厂商 WebView（华为、小米）对嵌套多层
none支持不稳定，建议扁平化 DOM 结构 - 动画中切换时机很重要：不能只在初始/结束态切
pointer-events，过渡帧若仍为auto，用户可能点中半透明状态下的元素
click。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
