必须显式设置 touch-action: manipulation 的元素包括：自定义可点击容器（如 、），以及轮播图指示点、tab 标签页、弹层关闭按钮等高频操作区；原生可点击元素（如 、）默认已优化，但重写 display 或覆盖 touch-action 时需手动补回。
直接加 touch-action: manipulation 就能消除 300ms 点击延迟，但只对明确可点击的元素生效，且必须避开常见覆盖和继承陷阱。
哪些元素必须显式设置 touch-action: manipulation
这个属性不继承，父元素设了，子元素默认还是 auto。浏览器只在触发原生 click 的上下文中检查它，所以：
-
<button></button>、<a></a>、<input type="button">等原生可点击元素默认已优化，但如果你重写了display或覆盖了touch-action，就得手动补回 - 所有用
onclick、@click、onClick绑定的自定义容器（比如<div class="btn">、<code><span role="button"></span>）必须单独加，不能靠父级兜底 - fixed 定位、transform 变形过的元素，在部分 Android WebView 中会忽略该声明，需额外补上
- 轮播图指示点、Tab 标签页、弹层关闭按钮这类高频操作区，优先加
- 父容器设置了
touch-action: auto（比如某些 UI 框架的.modal、.drawer），会阻断子元素的manipulation行为 - CSS 选择器权重不够：第三方样式表里有
* { touch-action: auto }，你的声明直接被干掉 - 元素没交互语义：纯
<div> 即使加了该属性，iOS Safari 仍可能不加速，得配合 <code>role="button"和tabindex="0" - 监听了
touchstart或touchmove：某些浏览器检测到 JS 手动干预后，会自动降级回 300ms 判断逻辑 - 用了
display: none隐藏遮罩层 →click仍按原坐标下发 → 点透到下层，这不是touch-action能解决的问题 - 在
里确保有：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">—— 这是兼容性最好的兜底，连 iOS 9 都支持 -
user-scalable=no会禁用用户缩放，若业务必须允许放大（如适老化需求），就别用它，改用touch-action: manipulation+role="button"+cursor: pointer组合 - 不要全局写
html { touch-action: manipulation }：会导致地图、轮播图等依赖多点手势的区域异常 - 真机测试时，重点看「第一次点击」是否立刻触发，而不是只看 DevTools 里 computed style 是否显示
manipulation
为什么加了 touch-action: manipulation 还是延迟
不是语法写错，而是被更高优先级规则或运行时行为覆盖了：
和 viewport 配合才真正稳
touch-action 是局部声明，viewport 是全局开关，二者作用机制不同，但互补：
真正容易被忽略的是：这个属性只影响浏览器的手势识别阶段，它不改变事件冒泡路径、不阻止点击穿透、也不修复 preventDefault() 在 passive listener 下的报错。每次加完，务必在 iOS Safari 和主流安卓 WebView 上真机连点三次，听反馈音、看视觉态、测跳转时机——延迟感这种事，模拟器看不出问题。
