加了 pointer-events: none 还点不透，最常见原因是加在父容器或兄弟节点而非真正遮挡的元素本身；该属性仅对声明节点生效，不继承、不传播、不跨层，且父设 none 时子元素 pointer-events: auto 无效。
pointer-events: none 能让元素彻底不参与点击事件，但加错位置、忽略子元素继承、没控好动画时机，就根本点不透。
为什么加了 pointer-events: none 还是点不透？
最常见原因是加在了父容器或兄弟节点上，而不是真正盖住目标的那层元素本身。这个属性只对声明它的那个 DOM 节点生效，不继承、不传播、不跨层。
- 错误示例：
.modal { pointer-events: none; }→ 里面所有子元素（包括.mask）都失活，但遮挡实际由.mask完成 - 正确做法：直接给
.mask加pointer-events: none - 检查伪元素：
.mask::before或.mask::after若存在且未设none，照样拦截点击 - 用 Chrome DevTools 的「Rendering」→ 勾选 Hit test borders，看哪一层真覆盖了点击坐标
遮罩里有关闭按钮，怎么让它可点？
不能靠“父设 none + 子设 auto”来救——浏览器在事件捕获阶段就跳过整棵子树，pointer-events: auto 在父级为 none 时完全无效。
- 把按钮提为兄弟节点：
<div class="overlay"></div> <button class="close-btn">×</button>，再用z-index和position: absolute控制视觉层级 - 或只对遮罩非按钮区域设
none，按钮所在区域保持auto（需配合clip-path或分块结构） - React/Vue 中优先用 Portal 渲染到
下，彻底脱离祖先干扰 - 避免在
.mask内放<input>或<select></select>—— iOS 旧版可能不弹软键盘，且无法被子元素恢复 focus
动画中 pointer-events 切换时机怎么控？
用 opacity 做淡入淡出时，如果只在初始和结束态切 pointer-events，中间帧仍为 auto，用户就可能点中半透明状态下的遮罩。
- 动画开始前立即设
pointer-events: none - 动画结束回调里再切回
auto（或移除该声明） - 别和
visibility: hidden混用——它不影响事件流，加了也是白加 -
display: none虽天然禁用交互，但无法做 CSS 动画，也不适合 SSR 场景 - 推荐用 class 切换（如
.is-fading），比内联 style 更可控、易调试
移动端真机测试最容易翻车的地方
滚动穿透和点击穿透不是一回事，iOS Safari 和安卓 WebView 行为差异大，尤其在输入框和快速滚动后点击场景下。
- 滚动穿透不是给遮罩设
none，而是给遮罩下方的可滚动容器（如.page-content）动态加pointer-events: none - iOS Safari 在滚动容器内有时会忽略
pointer-events: none，尤其当遮罩下压着<input>时，软键盘可能根本不弹 - 安卓部分 WebView（华为、小米）对
input[type="file"]的穿透支持不稳定，需 JS 临时移除 DOM 或降级处理 - 遇到 Safari 延迟或丢失事件，可尝试给父容器加
will-change: transform或transform: translateZ(0)触发硬件加速
真正容易被忽略的是层叠上下文干扰——比如某个父容器设置了 transform 或 will-change，会创建新的堆叠上下文，导致 z-index 和 pointer-events 行为偏离预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
