加了 pointer-events: none 仍点不透，大概率是加错元素；该属性只作用于当前元素，不继承、不穿透，需用 devtools 检查实际遮挡层（含伪元素、svg、fixed 导航栏），按钮应提为兄弟节点或用 portal 渲染，动画中需提前设 none、结束回调再恢复，移动端需注意 ios safari 和安卓 webview 的兼容性问题。
为什么加了 pointer-events: none 还是点不透？
大概率是加错元素了。这个属性只对当前元素生效，不“传染”给子元素，也不“跳过”父容器去影响兄弟节点。比如遮罩结构是 <div class="modal"><div class="mask"></div></div>，你只给 .modal 加了 pointer-events: none，那 .mask 依然会拦截点击——因为它是独立的、未设 none 的渲染节点。
实操建议：
- 用 Chrome DevTools 的「Rendering」面板勾选
Hit test borders，直接看哪一层实际覆盖了点击坐标 - 检查是否漏掉了伪元素（
::before/::after）、<svg></svg>子节点、或position: fixed的导航栏——它们都可能成为隐形遮挡源 - 别靠
z-index判断：再高的z-index，不设none仍会拦截；再低的z-index，只要没被挡住且未设none，照样响应
遮罩里有关闭按钮，怎么让它可点？
不能靠“父设 none + 子设 auto”来救。浏览器在事件捕获阶段就跳过了整棵子树，压根不会读取子元素的 pointer-events 值。
可行方案：
- 把按钮提为兄弟节点：
<div class="overlay"></div> <button class="close-btn">×</button>，再用z-index和position: absolute控制视觉层级 - 用伪元素模拟遮罩背景：
.overlay::before { content: ""; position: absolute; pointer-events: none; }，真实按钮保留在主 DOM 流中 - React/Vue 场景下优先用
Portal渲染到下，彻底脱离祖先干扰
动画中 pointer-events 的切换时机怎么控？
用 opacity 做淡入淡出时，不能只在初始和结束态切 pointer-events。过渡中间帧若仍为 auto，用户就可能点中半透明状态下的遮罩。
必须：
- 动画开始前立即设
pointer-events: none - 动画结束回调里再切回
auto或移除该声明 - 避免和
visibility: hidden混用——它不影响事件流，加了也是白加；display: none虽天然禁用交互，但无法做 CSS 动画
移动端真机测试最容易翻车的地方
iOS Safari 在滚动容器内有时会忽略 pointer-events: none，尤其当遮罩层下面压着 <input> 时，软键盘可能根本不弹。安卓部分 WebView（华为、小米）对 input[type="file"] 的穿透支持也不稳定。
关键应对点：
- 滚动穿透不是给遮罩设
none，而是给遮罩下方的可滚动容器（如.page-content）动态加pointer-events: none - 若目标是表单控件，部分 Android WebView 会因硬件加速开关导致穿透失效，需 JS 临时移除 DOM 或换代理层
- 真机必测：模拟器常表现正常，但 Safari 实际渲染可能跳过
pointer-events判断
pointer-events: none，而是确认它落在了哪个具体 DOM 节点上、有没有被父级或伪元素悄悄覆盖、以及动画和移动端的时机是否卡准。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
