实现点击穿透需用 pointer-events: none，但子元素设 auto 无效；正确方案是结构分离（如 portal）或区域控制（伪元素覆盖）；禁点击留滚动应 stoppropagation，移动端须优先用 touchstart 并真机测试。

要让点击事件“穿过”某个元素落到它下面的元素上，核心是用 pointer-events: none；但若想保留该元素自身可交互（比如关闭按钮），就不能简单给整个父容器设 none——关键在 DOM 结构与事件流的配合。

穿透的本质：浏览器跳过命中测试

当一个元素设置了 pointer-events: none，浏览器在事件命中测试（hit-testing）阶段就直接忽略它和它的整个子树。不是“传下去”，而是“根本没看见”。这意味着：

• 子元素即使写了 pointer-events: auto 也完全无效
• 该元素上不会触发 click、touchstart、:hover 等任何指针相关行为
• 视觉照常显示，不影响 opacity、visibility 或布局

常见误用：遮罩层 + 关闭按钮

典型错误写法：

jQuery点击事件遮罩弹出层可移动特效代码

"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。

下载

.mask { pointer-events: none; }
.mask .close { pointer-events: auto; }

这样按钮一定点不动。正确做法有两种：

• 结构分离：把关闭按钮移出遮罩 DOM 树，例如用 Portal 渲染到 下，再用绝对定位覆盖在遮罩右上角
• 区域控制：遮罩本身设 pointer-events: auto，只对非按钮区域加一层 pointer-events: none 的伪元素或空 div

逻辑忽略：禁用交互但不破坏滚动或焦点

pointer-events: none 会一并禁掉滚动、拖拽、软键盘唤起等所有指针行为。如果只需禁点击，其他交互要保留，就不能靠它：

• 禁点击但留滚动 → 给目标区域监听 click 并调用 e.stopPropagation()，滚动容器保持 auto
• 禁点击但需键盘操作 → 移除 tabindex 或设为 -1，否则屏幕阅读器仍可聚焦
• iOS 上 input 被 none 层挡住时软键盘不弹 → 改用 z-index 分离图层 + pointer-events: auto 配合 JS 判断点击位置

移动端特别注意

在 iOS Safari 和部分安卓 WebView 中：

• pointer-events: none 对 touchstart 生效，但旧版 Safari（≤15.4）不支持与 touch-action 协同
• 含 transform 或 will-change 的父容器可能导致 none 失效，真机必须测
• 别只监听 click，它有 300ms 延迟，容易被底层元素抢响应；优先用 touchstart + preventDefault() 配合 stopPropagation()