加了 pointer-events: none 仍点不透是因为该属性只作用于声明它的元素本身，不“传染”子元素但子元素会继承；常见错误包括父容器设 none 导致子按钮失活、伪元素未设 none、深层嵌套兼容性差、层叠上下文干扰等。
为什么加了 pointer-events: none 还是点不透
不是属性没生效，而是加错了地方：pointer-events: none 只对声明它的那个元素本身起作用，不作用于父级、兄弟节点，也不“传染”给子元素——但子元素会继承它（除非显式覆盖）。常见错误包括：
- 给父容器（如
.modal）设pointer-events: none，结果里面所有按钮都失活 - 遮罩用
::before伪元素实现，却只给主元素设了none，伪元素仍独立捕获点击 - 安卓某些 WebView 对三层以上嵌套的
none支持不稳定，DOM 层级越深越容易失效 - 父级用了
transform或will-change，意外创建层叠上下文，导致 z-index 和pointer-events行为错乱
遮罩里有关闭按钮，怎么让它可点
pointer-events: none 是自顶向下的硬拦截：父级设了，整棵子树在事件捕获阶段就被跳过，pointer-events: auto 在子元素上完全无效。别指望靠“父设 none + 子设 auto”救回来。
- 推荐做法：把关闭按钮移出遮罩 DOM 树，例如用 Portal 渲染到
下，再用z-index控制视觉层级 - 次选方案：不给整个遮罩设
none，而是用额外容器或伪元素隔离按钮区域，只对「非按钮区域」设pointer-events: none - 绝对不要用
position: absolute把按钮“视觉浮出来”——DOM 里它仍是被父级拦截的子节点
动画过渡中 pointer-events 切换时机怎么卡准
用 opacity 做淡入淡出时，如果只在初始和结束态切换 pointer-events，中间过渡帧仍为 auto，用户就可能点中半透明状态下的遮罩，触发误操作。
- 正确做法：动画开始前立即设
pointer-events: none；动画结束回调里再切回auto或移除该样式 - 避免用
transition动pointer-events本身——这个属性不支持过渡，浏览器会直接跳变 - 别和
visibility: hidden混用：它不影响事件流，加了也白加；display: none虽天然禁用交互，但无法做 CSS 动画
移动端点击穿透的特殊坑
iOS Safari 和安卓 WebView 对 pointer-events 的行为不一致，尤其在 touch 场景下：
- iOS Safari 15.4+ 才支持
touch-action与pointer-events协同；旧版遇到none层下的<input>，软键盘可能根本不弹 - 安卓部分厂商浏览器（华为、小米）会忽略
pointer-events: none对input[type="file"]的穿透，需 JS 临时移除 DOM - 滚动穿透不是给遮罩设
none，而是给遮罩下方的可滚动容器（如.page-content）动态加pointer-events: none
真正容易被忽略的是层叠上下文干扰——比如某个父容器设置了 transform 或 will-change，会创建新的堆叠上下文，导致 z-index 和 pointer-events 行为偏离预期。调试时建议打开开发者工具的「Rendering」面板，勾选 “Event listener breakpoints” 或直接用 “Toggle element screenshot” 查看事件接收链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
