touch-action: manipulation能消除移动端300ms点击延迟，因其跳过双击判定逻辑，直接触发click和pointerdown，等价于pan-x pan-y pinch-zoom，保留滚动缩放但禁用双击缩放与长按菜单。
移动端点击有延迟感，不是代码写错了，而是浏览器在等你“双击缩放”——它默认会卡住约300ms才派发click事件。现代浏览器只要明确告诉它“这里不需要双击”，延迟立刻消失。touch-action: manipulation就是这句关键指令。
touch-action: manipulation 为什么能消除延迟
它不是加速click，而是让浏览器跳过双击判定逻辑：收到touchend后不等待，直接触发click和pointerdown。这个值等价于pan-x pan-y pinch-zoom，保留滚动和缩放能力，但禁用double-tap-zoom和长按菜单，所以既快又安全。
注意：touch-action只影响原生手势识别阶段，不改变事件冒泡、不修复点击穿透，也不让touchstart变快——它只优化click的触发时机。
- 必须作用于实际绑定
click或具备交互语义的元素（如<button></button>、<a href></a>、div[role="button"]） - 不会继承，父元素设了，子元素仍需单独加
- 如果元素同时监听
touchstart且调用了preventDefault()，部分安卓 WebView 会自动降级回 300ms 行为
哪些地方必须加，哪些地方千万不能加
加对位置比加不加更重要。加错地方不仅无效，还可能破坏滚动或缩放。
立即学习“前端免费学习笔记（深入）”；
- 应该加：
.btn、.nav-item、[data-action]、轮播图的左右箭头、开关容器、弹窗确认按钮 - 不能加：列表外层
<div class="list">、轮播图容器本身、地图<code><div id="map">、任何需要横向/纵向滚动或双指缩放的区域<li>避免全局写在<code>html或body上——会导致整页无法双击缩放，影响图表、PDF 查看等场景 - 父容器设置了
touch-action: none或auto（比如某些 UI 框架的Modal组件），会阻止子元素的manipulation生效 - CSS 优先级被第三方样式覆盖，例如
* { touch-action: auto }这种通配符规则 - 元素没有可点击语义：
<div>光加<code>touch-action不够，得配合cursor: pointer或role="button" - 低版本 WebView 不支持：Android 4.4 内置 WebView 返回
getComputedStyle(el).touchAction为空字符串，说明未识别
如果你用了position: fixed或transform的按钮，在部分 Android WebView 中该属性可能被忽略，得单独补上。
写了却没生效？常见失效原因
DevTools 里看到声明了，但真机上还是卡，大概率是被覆盖、被阻断或语义缺失。
验证是否生效，别只看 Styles 面板——打开 Chrome DevTools → Sensors → 勾选 “Emulate touch and pointer events”，再点 Elements → Computed，查touch-action最终值是否为manipulation。
要不要搭配 viewport 或 FastClick
<meta name="viewport" content="user-scalable=no">和touch-action: manipulation目标一致，但机制不同：前者是全局禁缩放换无延迟，后者是局部声明换精细控制。建议组合使用——viewport保底，touch-action精准加速关键操作区。
FastClick 已基本淘汰。2026 年主流环境（iOS Safari ≥ 10.3、Chrome ≥ 56、微信内置浏览器、WKWebView）都稳定支持manipulation。若项目里还留着FastClick.attach()，反而会和原生行为冲突，导致重复触发或点击穿透。
真正容易被忽略的是：有些老 UI 库（如 Vant 2.x、Mint UI）默认启用 FastClick，即使你写了 CSS，JS 层仍在拦截事件流。这时候得关掉库的 fastclick 选项，或者 patch 初始化逻辑——否则touch-action只是摆设。
