加 pointer-events: none 必须作用于真正遮挡目标的元素本身，而非父级或兄弟节点；需注意子元素不可通过 auto 恢复响应、移动端兼容性差、动画时机不当及滚动穿透等陷阱。
直接给遮挡元素加 pointer-events: none 就能实现点击穿透，但必须加在“真正盖住目标”的那个元素上，且要处理好子元素、移动端兼容和动画时机——否则点不透、点错、或关不了弹窗。
为什么加了 pointer-events: none 还是点不透？
最常见原因是加错了位置：它只对当前元素生效，不作用于父容器或兄弟节点。比如一个 .mask 遮住了按钮，就得给 .mask 本身设 pointer-events: none，而不是给按钮或 body。
- 检查目标元素是否设置了
position: absolute或fixed—— 没定位的元素可能因层叠上下文没真盖住底层 - 伪元素（如
::before）也要单独设pointer-events: none，否则它会独立捕获事件 - 安卓某些 WebView 对嵌套多层
pointer-events: none支持不稳定，建议扁平化 DOM 结构
遮罩层里有关闭按钮，怎么让它可点？
不能靠“父设 none + 子设 auto”来救——浏览器在事件捕获阶段就跳过整棵子树，pointer-events: auto 在父级为 none 时完全无效。
- 把关闭按钮移出遮罩层 DOM 树，例如用 Portal 渲染到
下，再用z-index控制层级 - 或者只对遮罩层的“非按钮区域”设
pointer-events: none，按钮所在区域保持auto - 避免在
.mask内放<input>或<select></select>—— 它们无法被子元素恢复 focus，iOS 旧版甚至不弹软键盘
移动端点击穿透的特殊坑
iOS Safari 和安卓 WebView 行为不一致，尤其在 touch 事件链和输入框场景下：
- iOS Safari 15.4 之前不支持
pointer-events: none与touch-action协同；若none层下面压着<input>，软键盘可能不弹 - 安卓部分厂商浏览器（华为、小米）会忽略
pointer-events: none对input[type="file"]的穿透，需 JS 临时移除 DOM - 滚动穿透问题不是给遮罩设
none，而是给遮罩下方的可滚动容器（如.page-content）动态加pointer-events: none
动画中 pointer-events 的切换时机
用 opacity 做淡入淡出时，不能只在初始和结束态切 pointer-events —— 过渡中间帧若仍为 auto，用户就可能点中半透明状态下的元素。
- 动画开始前立即设
pointer-events: none，结束回调里再切回auto（或移除） - 避免和
visibility: hidden混用：它不影响事件流，加了也是白加；display: none虽天然禁用交互，但无法做 CSS 动画 - React/Vue 中推荐用 class 切换（如
.is-hidden { opacity: 0; pointer-events: none; }），比内联 style 更可控、易调试
真正难的不是写那行 pointer-events: none，而是判断它该加在哪一层、何时加、加完之后谁还能点——DOM 结构、渲染顺序、移动端差异，三者一碰就容易漏掉一个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
