移动端<button>点击延迟源于浏览器等待双击缩放，非JS性能问题；解决需viewport声明initial-scale=1.0且配合touch-action: manipulation（IE需-ms前缀），禁用FastClick共存，并注意DOM深度与事件冒泡路径。
移动端 <button> 点击延迟不是 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，得靠后续方案补位
优先给 button 加 touch-action: manipulation
原生 <button> 默认已有该行为，但一旦你写了 display: inline 或显式设了 touch-action: auto，就覆盖了默认优化，必须手动恢复。
- 只加在有点击意图的元素上，比如
<button class="primary">；不要设在html或body上，否则页面无法滚动 - CSS 示例：
button { touch-action: manipulation; } - IE10/11 需加前缀：
-ms-touch-action: manipulation; - 别用
touch-action: none：它会禁用所有默认手势（含滚动），而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或局部容器，否则动态弹层按钮会失效
穿透问题比延迟更难调试
哪怕 touch-action 已生效，只要上层弹层在 touchend 后立刻 display: none 或移除，300ms 后原生 click 仍会落到下层——这个时间差无法靠 JS 拦截。
- 临时解法：弹层隐藏前给下层元素加
pointer-events: none，延时恢复 - 更稳做法：改用
pointerdown事件替代click，它无延迟且不触发透传 - 注意：原生
<button>在pointerdown中调用e.preventDefault()会禁用焦点获取，慎用
最容易被忽略的是：DOM 深度超 6 层会削弱 touchstart 响应稳定性，尤其在低端安卓设备上；而 touch-action 若设在中间包裹层（比如 <div class="wrapper"><button>），可能因事件冒泡路径中断导致失效。
