touch-action: manipulation必须作用于具体可点击元素（如button、[role="button"]），配合viewport元标签、语义化标记及真机验证才生效；若viewport缺失、父级设touch-action:none、全局设置或被第三方库（如Vant 2.x FastClick）干扰，则失效。
直接加 touch-action: manipulation 是最有效手段，但必须加在具体可点击元素上，且需配合 viewport 元标签、语义化标记和真机验证，否则几乎必然失效。
为什么 touch-action: manipulation 没生效
不是语法写错，而是被运行时上下文覆盖或声明位置错误：
-
viewport元标签缺失、写错位置（不在<head>顶部）或漏了width=device-width，浏览器会默认启用双击检测逻辑，此时touch-action完全无效 -
touch-action不继承，父容器设了，子元素仍是auto；轮播外层、地图容器等本该禁用该属性的区域若误加，反而导致滚动失灵 - 第三方 UI 库（如 Vant 2.x、Mint UI）内置 FastClick，会挂载到
document.body，与你的touch-action冲突，甚至引发点击穿透 - CSS 权重不够：某些框架或重置样式里写了
* { touch-action: auto }，直接覆盖你的声明；务必用 DevTools 的 Computed 面板确认最终值是否为manipulation
哪些按钮必须显式设置 touch-action: manipulation
只加在明确用于触发 click 的元素上，原生可点击元素默认已优化，但一旦重写 display 或覆盖 touch-action 就得手动补回：
-
<button>、<a href>、<input type="button">等原生元素——若你改了display: inline-block或加了touch-action: auto，必须重设 - 所有用
@click/onClick绑定事件的自定义容器：<div class="btn">、<li class="tab-item">、轮播指示点、弹层关闭按钮（<span class="close">） - 纯
<div>必须配role="button"+tabindex="0"，否则 iOS Safari 可能忽略该声明 - 禁止全局写
body { touch-action: manipulation }或* { ... }——轮播图、横向滚动区、地图容器会立即失灵
如何验证是否真正生效
别信模拟器，真机测是唯一标准；延迟消失后，视觉反馈也得跟上：
立即学习“前端免费学习笔记（深入）”；
- 在 Safari 或 Chrome 真机调试中打开 Elements 面板，选中按钮，看 Computed 样式里
touch-action是否为manipulation - 长按按钮约 200ms 后松开，如果
click立即执行（比如弹窗秒出、路由瞬跳），说明生效；仍有“停顿感”，大概率是 JS 层监听了touchstart却没传{ passive: true } - 禁用 300ms 延迟后，
:active伪类会立刻触发，但部分设备（如带物理键盘的 iPad）仍会进入:focus，建议统一加:focus { outline: none } - 必须配视觉反馈：
-webkit-tap-highlight-color: transparent只关高亮，不提供新反馈；至少加:active { opacity: 0.7 }或背景色变化
最容易被忽略的是：你写的 CSS 没问题，但组件库或构建流程在底层干扰了事件流——比如 Vant 2.x 的 FastClick、Vite 中未清除 postcss.config.js 导致插件顺序错乱、或 Tailwind JIT 未真正启用（终端没显示 Using JIT mode）。这些不会报错，但会让所有优化归零。
