移动端按钮点击延迟源于浏览器等待双击缩放，设置touch-action: manipulation并配合viewport中initial-scale=1.0可消除300ms延迟；需避免FastClick共存及弹层穿透问题。
移动端按钮点击延迟不是 JS 慢，而是浏览器在等你双击缩放——只要没明确告诉它“这里不需要”，就会卡满约 300ms。现代 iOS Safari（9.3+）和 Chrome（36+）支持 touch-action: manipulation 直接跳过等待，这是目前最轻量、最可靠的解法。
viewport 必须含 initial-scale=1.0 才生效
只写 <meta name="viewport" content="width=device-width"> 不会消除延迟。iOS Safari 9.2 及更早版本、UC/QQ 浏览器旧版仍会等满 300ms。浏览器需要明确的缩放锚点，initial-scale=1.0 是触发双击判定优化的硬性条件。
常见错误：
-
user-scalable=no或maximum-scale=1.0才真正禁用双击缩放判断；minimum-scale=1.0单独无效 - 拼错成
minimun-scale会导致整个 meta 失效 - 该标签必须静态写在
<head>内，动态插入或放在<body>里解析失败 - 若页面需保留图片双指放大能力，就不能用
user-scalable=no，得靠后续方案补位
touch-action: manipulation 的正确用法
它不是“禁用所有手势”，而是告诉浏览器：“此处只需响应点击和单指纵向滚动”。语义准确、滚动不卡、兼容 iOS 9.3+ 和 Chrome 36+。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 只加在有点击意图的元素上，比如
<button>、<div class="card" onclick="">；不要设在html或body上，否则页面无法滚动 - 原生可点击元素（
<button>、<a>、<input type="button">）默认已有该行为，除非你写了display: inline或显式设了touch-action: auto - IE10/11 需加前缀：
-ms-touch-action: manipulation
别让 FastClick 和 touch-action 共存
FastClick 用 JS 模拟 click 并阻止原生 click，touch-action: manipulation 让原生 click 立即触发——两者机制冲突，共存后常见按钮无响应、事件重复、顺序错乱。
排查方法：
- 控制台输入
window.FastClick，返回构造函数说明还在运行 - 全局搜索
FastClick.attach或new FastClick() - 若已用
touch-action，直接删掉FastClick初始化代码，无需替换逻辑 - 老项目若保留
FastClick，必须确保它只挂载在document.body上，不能挂到#app或局部容器，否则动态弹层按钮会失效
穿透问题比延迟更难调试，且无法靠 JS 拦截
哪怕 touch-action 已生效，只要上层弹层在 touchend 后立刻 display: none 或移除，300ms 后原生 click 仍会落到下层按钮上——这跟延迟无关，是浏览器事件调度机制决定的。
解决方式只有两个：
- 用
pointer-events: none临时禁用下层区域（注意：要配合z-index和层叠上下文） - 改用
visibility: hidden或opacity: 0配合transition动画收起弹层，确保 DOM 存在且可接收事件直到动画结束
这个细节容易被忽略，但一旦出现，用户点一次触发两次提交，比慢更致命。
