直接给遮罩层本身设pointer-events: none才能实现点击穿透，加在父容器、opacity: 0或visibility: hidden均无效；该属性仅对声明元素生效，不继承不传播，伪元素需单独设置，移动端需防滚动穿透和软键盘异常。
pointer-events: none，不是给父容器、不是靠 opacity: 0 或 visibility: hidden，更不是只加 z-index——否则 iOS Safari 和部分安卓 WebView 里点一下就穿到下层按钮。
为什么加了 pointer-events: none 还是点不透？
最常见原因是加错了 DOM 节点：pointer-events: none 只对声明它的那个元素生效，不继承、不传播、不跳过子树。比如遮罩是 .mask，但你把样式写在了它的父容器 .dialog 上，那 .mask 本身依然拦截点击。
- 用 Chrome DevTools 的「Rendering」面板勾选 Hit test borders，一眼看出哪一层真正在盖住目标位置
- 右键点击失效区域 → 「检查元素」，跳转到的节点大概率就是实际挡路的那个
- 检查「Computed」面板中
pointer-events值是否为none（哪怕带删除线，也说明被祖先覆盖过） - 伪元素
::before/::after默认参与事件流，必须单独加pointer-events: none
遮罩里有关闭按钮，怎么让它可点？
pointer-events: none 是自顶向下的硬拦截：父元素设了，整棵子树都不会进入 hit-testing 阶段，子元素写 pointer-events: auto 完全无效。
- 把关闭按钮提成遮罩层的兄弟节点：
<div class="mask"></div> <button class="close">×</button>，再用z-index和position: absolute控制视觉层级 - React/Vue 场景优先用 Portal 渲染按钮到
下，彻底脱离遮罩 DOM 树 - 若必须保留在遮罩内部，只对「非按钮区域」设
pointer-events: none，按钮所在区域保持auto（需用额外容器或clip-path精确定界）
移动端滚动穿透和输入框软键盘不弹怎么办？
pointer-events: none 对 touchmove 和滚动无作用——它只影响 hit-testing，不阻止底层容器响应滑动。
- 弹窗显示时，给下层可滚动容器（如
.page-content）动态加pointer-events: none；关闭时恢复为auto - 别误加在
body或html上，否则整个页面失焦 - iOS Safari 15.4 之前，若
none层下面压着<input type="text">，软键盘可能不弹；真机必测 - 安卓部分厂商 WebView（华为、小米）会忽略
pointer-events: none对input[type="file"]的穿透，需 JS 临时移除 DOM 或换方案
动画过渡中 pointer-events 怎么切才安全？
用 opacity 做淡入淡出时，不能只在初始和结束态切换 pointer-events——过渡中间帧若仍为 auto，用户就可能点中半透明状态下的元素。
- 动画开始前立即设
pointer-events: none，结束回调里再切回auto（或移除该样式） - 避免和
visibility: hidden混用：它不影响事件流，加了也是白加 - 推荐用 class 切换（如
.is-hidden { opacity: 0; pointer-events: none; }），比内联 style 更可控、易调试
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
