移动端双击缩放延迟与点击穿透本质是300ms判定窗口引发的同一机制：viewport需同时声明width=device-width、initial-scale=1.0、maximum-scale=1.0；优先用touch-action: manipulation精准控制交互区域；推荐以touchend替代click，避免fastclick与现代方案冲突。
移动端双击缩放延迟和点击穿透，本质是同一个机制的两面表现：浏览器为判断是否双击缩放，会预留约300ms窗口，期间若上层元素被移除或隐藏，后续触发的click就可能落到下层——这就是穿透；而延迟本身，则是等待窗口未结束前click不派发。
viewport必须完整且静态声明
仅写<meta name="viewport" content="width=device-width">不够稳定。iOS 9.2及更早版本、部分安卓旧版WebView仍会保留延迟。关键三项必须同时存在，并置于内：
-
width=device-width：告诉浏览器按设备物理宽度渲染 -
initial-scale=1.0：显式启用缩放判定优化逻辑（缺省时某些UC、QQ浏览器不生效） -
user-scalable=no或maximum-scale=1.0：真正关闭双击缩放判定，消除延迟根源
注意：user-scalable=no会禁用所有用户缩放（包括图片放大），如需保留合理缩放能力，可用maximum-scale=1.0替代，效果等价但更友好。
优先使用touch-action: manipulation
这是现代解法的核心。它语义明确：只允许点击和单指滚动，跳过双击判定，同时不破坏页面纵向滑动。
- 只加在有交互意图的容器上，例如
<div class="card" onclick="handleClick()">或React中包裹<code>onClick的wrapper - 原生可点击元素（
<button></button>、<a></a>、<input type="button">）默认已优化，无需额外设置 - 避免写在
或上，否则可能意外禁用全局滚动 - 兼容iOS 9.3+、Chrome 36+，比
touch-action: none更安全（后者会锁死所有手势） - 监听
touchend而非click，手指抬起即响应，无延迟、无穿透风险 - 需同步执行DOM变更（比如隐藏弹层、切换状态），确保300ms后原生click找不到目标
- 跳转类操作要手动处理：
event.preventDefault(); location.href = 'xxx'; - 兼顾PC端时，可分支监听：
if ('ontouchstart' in window) { 监听touchend } else { 监听click } - 两者共存会导致事件重复、顺序错乱，甚至按钮完全失灵
- FastClick必须挂载到
document.body才能覆盖全页，局部挂载会漏掉动态插入节点 - 现代项目建议彻底移除FastClick，改用viewport + touch-action组合
- 若必须保留，需调用
FastClick.detach()清理，尤其在SPA路由切换或组件卸载时
用touchend替代click处理交互
绕过300ms机制最稳妥的方式，不是“修复click”，而是不用click。
警惕FastClick与touch-action共存
FastClick是JS模拟click的老方案，原理是在touchend时阻止原生click并手动派发。它与touch-action: manipulation逻辑冲突：
