移动端点击按钮有300ms延迟是因浏览器需判断是否双击缩放；用touch-action: manipulation可禁用双击判定，消除延迟，但需避免与fastclick冲突、确保选择器生效且不干扰滚动。
为什么移动端点击按钮有明显延迟
这是 iOS Safari 和部分安卓 WebView 的默认行为：为识别双击缩放，会等待约 300ms 看你是否点第二下。用户点一次，视觉反馈滞后，感觉“卡”或“没响应”。touch-action: auto 本身不解决延迟——它只是默认值，真正起效的是显式禁用缩放判定。
用 touch-action: manipulation 替代 auto
touch-action: auto 允许所有手势（包括双击缩放），所以延迟照旧；而 manipulation 明确告诉浏览器：“这个区域只做平移和点击，别等双击”。这是目前最轻量、兼容性足够（iOS 9.3+、Android Chrome 36+）的解法。
- 对按钮、链接、开关等纯操作控件，直接加
touch-action: manipulation - 不要全局设在
body或html上，否则可能禁用页面级滑动 - 如果组件内部需要横向滚动（比如轮播图容器），不能设
manipulation，得用pan-x+pinch-zoom组合
遇到 click 事件仍延迟？检查是否被 fastclick 干扰
老项目里常引入 fastclick 库来抹平 300ms 延迟，但它和现代 touch-action 行为冲突：两者都试图接管点击逻辑，反而导致事件重复、顺序错乱或失效。
- 先确认是否还加载了
fastclick—— 查看console.log(FastClick)或搜索new FastClick - 若已用
touch-action: manipulation，就该删掉fastclick初始化代码 - 注意：某些 UI 框架（如早期 Ionic）内置了
fastclick，需查文档关掉对应配置项
真机测试时发现部分按钮没生效
常见原因是 CSS 选择器没覆盖到目标元素，或者父容器设置了 touch-action: none（比如地图组件、Canvas 区域），会阻止子元素的 manipulation 生效。
- 用 Safari / Chrome DevTools 的「Elements」面板检查目标按钮的实际计算样式，看
touch-action是否被覆盖或重置 - 避免在按钮上写
touch-action: manipulation !important，优先用更具体的选择器提权 - 安卓低端机（如 Android 4.4 WebView）不支持
manipulation，可降级为touch-action: pan-y pinch-zoom，再配合cursor: pointer触发点击态
真正要盯住的不是属性名，而是“这个元素是否被浏览器认定为‘可点击且无需双击判断’”。每次改完，务必在真机上点几次，听声音、看反馈、测连点响应——延迟感这种事，模拟器骗不了人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
