pointer-events: none 仅禁用鼠标/触摸事件响应，不改变视觉层叠与布局，底层元素仍被遮挡；需配合 z-index、overflow、touch-action 及避免 contain 等才能实现真正点击透传。
pointer-events: none 为什么不能直接解决遮挡
它只是让当前元素“不响应鼠标/触摸事件”，但视觉上依然占据层叠上下文位置，后面的元素还是被盖住。用户点不到、也看不到底下内容——这不是透传，是“假装看不见”。
常见错误现象：pointer-events: none 加了，但 z-index 没调，或者父容器用了 overflow: hidden，结果底下元素被裁掉；又或者用了 position: fixed 的弹窗，加了 none 后点击穿透了，但手指滑动时仍被拦截（移动端 touchmove 不受 pointer-events 控制）。
- 只对 pointer events（click/touchstart/mouseover 等）生效，不影响布局流、视觉渲染、滚动行为
- 对
touchmove和scroll无作用，需配合touch-action或容器滚动设置 - 若父级设置了
pointer-events: none，子元素设auto也无法恢复（继承不可逆）
真正要透传点击，得配齐三层控制
移动端点击穿透不是单靠一个 CSS 属性能搞定的，必须同时处理事件捕获路径、层叠顺序和手势响应边界。
- 给遮挡层加
pointer-events: none（基础） - 确保其父容器没有
overflow: hidden或裁剪类 transform（比如transform: scale(0.99)会隐式创建新层叠上下文并截断穿透） - 在需要响应的底层容器上显式加
touch-action: manipulation或auto，否则 iOS Safari 可能延迟或吞掉 touchstart
示例场景：半透明 loading 遮罩下，允许用户点击按钮：
.overlay {
pointer-events: none;
/* 不要写 position: fixed + z-index: 9999 还不设 height/width，容易撑开空白层 */
}
.overlay::before {
content: "";
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
pointer-events: none; /* 关键：伪元素也要关 */
}
安卓 vs iOS 在 pointer-events 上的行为差异
iOS Safari 对 pointer-events 的支持更严格，但也更“诚实”；安卓 WebView（尤其旧版）常有 bug：比如 none 加了却仍触发 click，或对 position: sticky 元素失效。
- iOS 15+ 支持
pointer-events: auto在iframe内生效，但安卓 Chrome 110 前不支持 iframe 内透传 - 安卓部分厂商浏览器（如华为、小米）会忽略
pointer-events: none对input[type="file"]或select的穿透，必须用 JS 移除 DOM 或临时display: none - 如果遮挡层含
will-change: transform，某些安卓机型会强制开启合成层，导致pointer-events失效
比 pointer-events 更稳的替代方案
当遮挡层逻辑复杂（比如带动画、多状态、需监听遮罩内部分区域），硬塞 none 容易翻车。这时候不如换思路：
- 不用遮罩层，改用
backdrop-filter+ 半透明背景（视觉遮挡但无 DOM 节点） - 遮罩层保留，但用 JS 在点击时临时移除，300ms 后再加回（适合 loading 类场景）
- 底层可点击区域主动监听
document.elementFromPoint(x, y)，在遮罩层的touchstart里手动派发事件到目标元素（绕过捕获阶段）
最常被忽略的一点：即使所有 CSS 都写对了，如果遮挡层用了 contain: layout paint，iOS 上也会阻止事件穿透——这个属性比 pointer-events 还霸道，删掉它往往比调样式更快解决问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
