实现点击穿透需用 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 渲染到
<body>下，再用绝对定位覆盖在遮罩右上角 -
区域控制：遮罩本身设
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()
