移动端点击延迟是iOS Safari和部分Android浏览器为判断双击缩放而引入的约300ms等待，可通过touch-action: manipulation安全消除，它保留滚动与双指缩放，仅禁用双击缩放判定。
移动端点击延迟是怎么回事
iOS Safari 和部分 Android 浏览器在 click 事件前会等待约 300ms，用来判断用户是否要双击缩放。这个延迟不是 bug，是历史兼容设计，但对按钮、开关等交互元素非常碍事。
常见现象包括：tap 后响应慢、click 触发滞后、H5 页面“点不动”的错觉。尤其在 Vue/React 绑定 @click 时更明显——不是框架问题，是底层浏览器行为。
touch-action: manipulation 能直接砍掉延迟
touch-action: manipulation 告诉浏览器：“这个区域只做平移和双击缩放以外的操作”，浏览器就会跳过 300ms 判断，立即触发 click。
它比 touch-action: none 更安全，后者会禁用所有原生手势（包括滚动），而 manipulation 保留滚动和 pinch-zoom（双击缩放仍可用，单击不等待）。
适用场景：button、a、带 onclick 的 div、自定义开关、弹层关闭按钮等明确的点击目标。
实操建议：
- 优先加在具体可点击元素上，比如
button { touch-action: manipulation; } - 避免全局设置
* { touch-action: manipulation; }，否则页面可能无法横向滚动或双击缩放图片 - 配合
cursor: pointer可增强点击反馈感（尤其在 iOS 上） - 不需要 JS polyfill，Chrome 36+、Safari 9.1+、Firefox 52+ 均原生支持
为什么不用 touch-action: none 或 auto
touch-action: none 确实也能消除延迟，但它同时禁用了所有触摸行为——用户无法滚动容器、无法双击放大图片、甚至无法在某些安卓 WebView 中拖拽滑块。
touch-action: auto 是默认值，等同于保留全部 300ms 判断逻辑，毫无改善。
关键区别：
-
manipulation= 允许 pan-x / pan-y / pinch-zoom，禁止 double-tap-zoom —— ✅ 安全去延迟 -
none= 所有手势交给 JS 处理，浏览器完全不管 —— ⚠️ 滚动失效风险高 -
auto= 默认行为，300ms 照常 —— ❌ 无变化
如果你用 fastclick 或 zepto.tap，现在基本可以删了——touch-action 是 CSS 原生方案，零 JS 开销，无兼容包袱。
兼容性与容易忽略的细节
IE10–11 支持 touch-action，但不支持 manipulation 值（只认 none/pan-x 等），不过 IE 移动端早已淘汰，实际影响极小。
真正容易踩的坑是：父容器设置了 touch-action: none，子元素即使写了 manipulation 也会被继承压制——CSS 的 touch-action 不支持“子覆盖父”，一旦父级禁用，子级手势全失效。
所以检查层级时，重点看最近的非 auto 父容器；另外，iframe 内的内容不受外层 touch-action 影响，但 iframe 自身需要单独设置。
复杂交互组件（如地图、画布、滑动轮播）里，别为了省事给整个容器加 manipulation，应精确控制到按钮类子元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
