pointer-events: none 仍点不透的主因是加错元素或层叠上下文干扰：它仅作用于当前元素，伪元素需单独设置，父级设后子元素无论 auto 均被拦截，正确解法为portal移出dom或隔离非按钮区域。

为什么 pointer-events: none 有时还是点不透

加了 pointer-events: none 却仍穿透，大概率是加错了元素：它只对当前元素生效，不作用于父容器或兄弟节点。比如遮罩用 .mask 包裹，就得直接给 .mask 设，而不是给按钮、body 或它的某个祖先。

常见漏点：

• 伪元素（如 ::before）默认独立参与事件检测，必须单独加 pointer-events: none
• 遮罩没真正盖住目标——检查是否因 transform、opacity 或 will-change 创建了意外的层叠上下文，导致 z-index 失效
• 安卓某些 WebView 对嵌套多层 pointer-events: none 支持不稳定，建议 DOM 结构扁平化，避免三层以上嵌套

关闭按钮点不了？不是子元素写 auto 就能救

pointer-events: none 是自顶向下的硬拦截：父元素设了，整棵子树（包括显式写了 pointer-events: auto 的子元素）都会被跳过。这不是 bug，所有现代浏览器行为一致。

正确解法只有两个：

• 把关闭按钮移出遮罩 DOM 树，例如用 Portal 渲染到 下，再靠 z-index 控制层级
• 不给整个遮罩设 none，而是用额外容器或伪元素隔离按钮区域，只对「非按钮区域」设 pointer-events: none

别用 position: absolute 把按钮“视觉浮出来”——DOM 里它仍是被父级 none 拦截的子节点。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

动画过渡中 pointer-events 切换时机必须精准

用 opacity 做淡入淡出时，不能只在初始和结束态切 pointer-events。过渡中间帧若仍为 auto，用户就可能点中半透明状态下的元素。

必须配合 JS 过渡回调或 CSS 动画生命周期：

• 动画开始前立即设 pointer-events: none
• 动画结束后再切回 auto 或移除该样式
• 避免和 visibility: hidden 混用——它不影响事件流，加了白加

滚动穿透和点击穿透是两回事，别混着治

点击穿透靠 pointer-events: none 解决；滚动穿透则要靠 overscroll-behavior，且必须设在**实际可滚动的容器上**，比如弹窗内部的 .modal__content，而不是弹窗 wrapper 本身。

真机测试不可省：

• iOS Safari 对 pointer-events: none 在 overflow: scroll 容器内的响应有延迟
• 微信内置浏览器建议加空 <div> 做透传代理，尤其当遮罩下压着 <code><input> 时，否则软键盘可能不弹
• 部分安卓厂商浏览器（华为、小米）会忽略 pointer-events: none 对 input[type="file"] 的穿透，需 JS 临时移除 DOM

最易被忽略的，是遮罩层 DOM 结构和祖先节点的状态——你以为只改了一个 class，其实整个子树已被浏览器跳过命中测试，连 event.target 都捕获不到。