按钮点击穿透是浏览器机制所致：touchend后约300ms才触发click，此时若遮罩层已隐藏，click便落到下层可点击元素上；最稳解法是统一用touchend替代click，并兼容PC端，慎用pointer-events: none。
为什么按钮会点击穿透
不是代码写错了，是浏览器机制：用户 touchend 后约 300ms 才触发原生 click，而你用 touchend 隐藏了遮罩层，此时 click 就落到下层按钮上——哪怕它刚被“盖住”，只要 DOM 还在、有 onclick 或是原生可点击元素（如 <a>、<button>），就会被触发。
最稳解法：统一用 touchend 替代 click
不依赖 meta 配置或 CSS hack，直接绕过 300ms 延迟和穿透链。但要注意行为差异：
-
touchend在手指抬起瞬间触发，无双击判断，也不冒泡到父级click处理器 - 跳转不能靠
<a href="...">，得手动e.preventDefault(); location.href = 'xxx'; - 需兼容 PC 端？加判断：
if ('ontouchstart' in window) { ...touchend... } else { ...click... } - 原生
<button>和<input type="button">默认支持touchend，无需额外处理
慎用 pointer-events: none
本质是让 click “穿过去”，但控制窗口极窄，容易翻车：
- 必须在
touchend后立即给底层目标加style.pointerEvents = 'none' - 350ms 内必须恢复，否则用户点下去毫无反馈，手快的人一眼就察觉
- 若底层是动态列表（如 Vue/React 渲染的
v-for项），很难精准定位并批量控制哪些节点该加/何时删 - 部分 Android WebView（尤其 4.4 及更早）对
pointer-events支持不全，表现不一致
viewport 和 touch-action 是基础防线，但不能单独解决穿透
它们能消除 300ms 延迟，但无法阻止已发生的穿透逻辑：
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">必须静态写在<head>里，缺initial-scale=1.0就可能失效 -
touch-action: manipulation比none安全：保留纵向滚动，只禁双击缩放；仅加在明确有点击意图的容器上（如卡片 wrapper），别乱套在body上 -
touch-action对原生可点击元素无效——<button>本身就有该行为，除非你显式重写了display或设了touch-action: auto - 别和
FastClick共存：两者机制冲突，会导致事件重复、顺序错乱甚至完全无响应
穿透问题真正难在“时机差”——touchend 和 click 不同步，而 DOM 变更又发生在中间。任何方案都得围绕这个时间差做协调，而不是寄希望于某一行 CSS 或一个 meta 标签就能一劳永逸。
