touch-action: manipulation能消除300ms点击延迟，但仅对button、a、input[type="button"]、[role="button"]、[data-action]等明确可点击元素生效，必须显式加在目标元素上，不继承，不可全局设置于body或*，否则破坏滚动缩放。
touch-action: manipulation 能直接消除 300ms 点击延迟，但它只对真正“可点击”的元素生效——不是加在 body 或 * 上就能起作用，更不是写了就自动覆盖所有子元素。
哪些元素必须显式加 touch-action: manipulation
浏览器只在触发原生 click 的上下文中检查该属性，且不继承。以下情况必须单独设置：
-
button、a、input[type="button"]等原生可点击元素——即使默认优化，一旦你重写了display（比如改成inline-flex）或覆盖了touch-action，就得手动补回 - 所有带
onclick、@click、onClick的自定义容器，例如<div class="btn">、<code><li class="tab-item">、轮播图指示点、弹层关闭按钮 - 语义化标记的交互区，如
[role="button"]、[data-action]、[data-bs-toggle] -
viewportmeta 标签缺失、位置错误（不在最顶部），或漏了initial-scale=1.0—— 这会让浏览器退回双击检测逻辑，touch-action直接作废 - 父容器设置了
touch-action: none或auto（比如某些 UI 框架的.modal、.drawer），子元素的声明被压制 - CSS 权重不够：第三方样式表里有
* { touch-action: auto }，你的规则被覆盖；务必用 DevTools 的 Computed 面板确认最终值是不是manipulation - 元素本身无交互语义：纯
div即使加了该属性，iOS Safari 仍可能跳过加速逻辑，得配role="button" tabindex="0" - iOS Safari 只对浏览器认定为“可交互”的元素启用
:active，比如button、a；纯div即使加了cursor: pointer，也大概率被忽略 - 视觉反馈不能只靠
:active：它的生命周期极短（毫秒级），用background-color或box-shadow容易卡顿，还常被系统高亮盖住 - 必须配
-webkit-tap-highlight-color: transparent，否则 iOS 灰色遮罩会覆盖你的样式 - 推荐方案：
:active { transform: scale(0.96); opacity: 0.85; }，过渡时间控制在0.08s–0.12s，太长反而拖沓 - 轮播图外层容器、
#map、横向滚动的.list、图表区域——这些需要pan-x、pan-y或pinch-zoom，加了manipulation会导致无法滑动或缩放 - 全局写
* { touch-action: manipulation }或body { touch-action: manipulation }是高危操作，上线前真机测一遍轮播图和地图是否还能正常交互 - fixed 定位或带
transform的按钮，在部分 Android WebView 中该属性会被忽略，得额外补上
别信“父容器设了，子元素就自动继承”——touch-action 不支持子级覆盖父级，父级若设了 none，子元素写 manipulation 也无效。
为什么加了还是没效果？常见失效场景
真机上延迟仍在，大概率是被以下任一条件拦住了：
:active 伪类为啥不触发？光加 touch-action 不够
禁掉延迟后，click 确实快了，但用户看不到反馈——这不是 :active 写错了，而是它根本没进匹配流程：
轮播图、地图、列表这些区域千万别乱加
touch-action: manipulation 不是万能开关，加错地方会直接破坏手势体验：
最稳的路径是：每个可点击目标单独加，每处轮播/地图容器明确禁用，每次改完立刻真机验证——模拟器永远测不出滚动失灵或点击穿透这种链路问题。
