加 touch-action: manipulation 可消除 300ms 点击延迟，但仅适用于明确点击的容器（如自定义按钮、卡片项、Tab 标签等），禁用于需滚动的区域；生效需满足 viewport 设置、无父级 none 限制、touch 事件 passive 且 CSS 未被覆盖。
直接加 touch-action: manipulation 就能消除 300ms 点击延迟，但必须加对地方、加对元素，否则无效甚至引发滚动失效。
哪些元素该加 touch-action: manipulation
只加在明确用于点击的容器上，不是所有元素都需要：
-
<button>、<a href>、<input type="button">等原生可点击元素默认已优化，一般不用加（除非你重写了display或覆盖了touch-action） - 自定义按钮：比如
<div class="btn">、<span role="button" tabindex="0">，必须加 - 卡片列表项（
<li class="card">）、Tab 标签、轮播图指示点这类带click或@click的 wrapper 元素，要加 - 轮播图容器、地图区域、横向滚动列表外层等需要手势交互的容器，不能加 —— 否则会禁用滚动
为什么加了还是有延迟
常见原因不是语法错，而是生效条件被破坏：
- 父容器设置了
touch-action: none，子元素的manipulation会被强制忽略（touch-action不继承，但会受父级限制） - 元素绑定了
touchstart或touchmove监听器，且没配{ passive: true }，浏览器会退回到兼容模式，重新启用 300ms 判断 - CSS 选择器权重不够，被其他规则覆盖；检查 DevTools 的 Computed 面板，确认最终生效值确实是
manipulation，不是auto或none - 用了
display: none隐藏遮罩层后立即触发下层 click，造成“点透”——touch-action不解决点透，它只影响 click 触发时机
要不要配 viewport 和 passive 选项
要，但分工明确：
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是基础，缺了它，touch-action在部分 iOS 版本中可能被忽略 -
user-scalable=no能全局禁用双击逻辑，但会影响无障碍访问；如果业务允许缩放，就别加，靠touch-action局部控制更安全 - 监听
touchstart时，务必传{ passive: true }，否则 Chrome/Safari 会报Unable to preventDefault inside passive event listener，还可能导致滚动卡顿
验证是否真正生效
别信模拟器，真机测最准：
- 在 Safari 或 Chrome 真机调试中打开 Elements 面板，选中按钮，看 Computed 样式里
touch-action是否为manipulation - 长按按钮约 200ms 后松开，如果 click 立即执行（比如弹窗秒出、路由瞬跳），说明生效；如果仍有明显“停顿感”，大概率是 JS 层拦截或父级限制未解除
- 滚动页面时点按钮，确保不误触也不卡顿——若滚动突然变涩，说明不该加
manipulation的容器被误加了
真正容易被忽略的是：组件库内部可能自带 fastclick 或劫持了 touch 流程，此时即使你写了 touch-action，JS 层仍会覆盖原生行为。得先关掉库的点击增强选项，再单独验证 CSS 是否起效。
