安卓 webview 对 pointer-events: none 支持不稳定，尤其华为、小米旧版会忽略该属性，伪元素和 position: sticky 是高发陷阱，需结合 touch-action:none 与 js 动态控制才可靠。
安卓 WebView 对 pointer-events: none 支持不稳定
部分安卓厂商浏览器（尤其是华为、小米旧版 WebView）会直接忽略 pointer-events: none，尤其对 <input type="file">、<select></select> 等表单控件完全不穿透。这不是你写错了，是底层渲染引擎没按规范实现——查 computed 样式能看到值确实是 "none"，但事件仍被捕获。
伪元素和 position: sticky 是两大高发陷阱
安卓 WebView 对 ::before/::after 伪元素的 pointer-events 处理常有 bug：即使显式写了 pointer-events: none，它仍可能独立拦截 touchstart；position: sticky 元素在多数安卓 WebView 中根本无视 pointer-events: none，换成 position: relative + top 模拟往往立刻生效。
别信“父设 none + 子设 auto”能救回来
这个组合在所有安卓 WebView 中都无效，因为事件捕获阶段就跳过整棵子树。常见错误：
- 把关闭按钮塞进
<div class="mask" style="pointer-events:none"><button></button></div> - 用
.mask::before { pointer-events: none; }画遮罩，却指望按钮靠父级 auto 恢复交互
验证方式：运行 getComputedStyle(document.querySelector('.your-btn')).pointerEvents，若返回 "none"，说明祖先某层强制覆盖了它——逐级向上查 computed 值，直到找到第一个设 none 的节点。
移动端穿透必须同步处理 touch 事件链
iOS Safari 和安卓 WebView 在 touch 事件路径上行为不一致：click 有 300ms 延迟，而 touchstart 是即时的。如果只监听 click，用户点遮罩时底层元素可能已在延迟窗口内响应，看起来像“点透了”，实则是误触发。
更关键的是：某些安卓 WebView 不支持 pointer-events: none 与 touch-action 协同，导致 touchmove 被吞或滚动卡顿。稳妥做法是：
- 对遮罩层同时加
touch-action: none - 对下方可滚动容器（如
.page-content）动态加pointer-events: none防止滚动穿透 - 避免用
transition切换pointer-events值，部分 WebView 会在中间态卡住
真正可靠的穿透，从来不是靠一行 CSS 撑全场。安卓环境下，pointer-events: none 更像是一个“尽力而为”的提示，而不是硬性保证——该用 JS 临时移除 DOM 或 Portal 渲染的，别犹豫。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
