-webkit-tap-highlight-color 仅控制ios safari点击高亮的视觉样式，与300ms点击延迟无关；真正消除延迟需用touch-action: manipulation，并配合:active样式和transparent高亮以保障交互体验。
为什么 -webkit-tap-highlight-color 不能解决点击延迟
它完全不处理 300ms 延迟问题。-webkit-tap-highlight-color 只控制 iOS Safari 点击时那个半透明灰色高亮层的颜色和显隐，属于视觉反馈层，和事件触发时机毫无关系。写了它，click 依然要等满 300ms 才执行；删了它，延迟也照旧存在。很多项目误以为“关掉高亮 = 消除延迟”，结果白调了半天样式，交互还是卡。
-webkit-tap-highlight-color 的真实作用和常见误用
它的唯一职责是定制点击瞬间的视觉提示：比如设成 transparent 可隐藏高亮，设成 rgba(0,120,255,0.2) 能换种蓝调。但要注意：
- 只在 iOS Safari 和部分旧版 Android WebView 中生效，Chrome for Android 已弃用该属性
- 设为
transparent后，若元素没配:active样式，用户会感觉“点下去没反应” - 它对
button、a等原生可点击元素默认有高亮；对纯div即使加了该属性，iOS 也可能不显示高亮（除非同时加cursor: pointer或role="button"）
真正能砍掉 300ms 延迟的 CSS 方案只有 touch-action
必须用 touch-action: manipulation，且满足以下条件才生效：
- 目标元素得是可点击语义化标签（
button、a），或显式声明role="button"、onclick属性 - 不能被父容器的
touch-action: none或auto覆盖（查getComputedStyle(el).touchAction是否返回manipulation） - 避免用在滚动容器上——比如列表外层
div加了它，用户就滑不动了 - Android 4.4 内置 WebView 不支持，
touch-action返回空字符串即失效，需降级用fastclick
点击态体验要完整，得组合三样东西
单靠 -webkit-tap-highlight-color 或单靠 touch-action 都不够：
-
touch-action: manipulation→ 解决延迟，让click立刻触发 -
:active { opacity: 0.7; }或其他状态样式 → 提供即时视觉反馈（比高亮更可控） -
-webkit-tap-highlight-color: transparent→ 避免系统高亮和自定义:active样式打架
容易被忽略的是：touch-action 不影响 pointer-events，也不阻止点击穿透。弹层按钮点了背后还触发？那得靠 pointer-events: none 或层级隔离，不是调 -webkit-tap-highlight-color 能解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
