直接写 -webkit-tap-highlight-color: transparent 即可关闭移动端点击高亮，但仅对可点击元素（如a、button、带onclick的div等）自身样式生效；挂错位置（如仅写在body上）、值错误（如用none而非transparent）、或受user-select/viewport/ui框架干扰均会导致失效。
直接写 -webkit-tap-highlight-color: transparent 就能关掉，但只对可点击元素生效，且必须挂对地方、写对值，否则白配。
为什么写了没反应？常见挂错位置和值错误
这个属性不是全局开关，它只在「目标元素自身样式」里才起作用：
- 不能只写在
body或* {}里——父级声明不继承，子元素不会自动获得 - 必须明确加到可点击元素上，比如
a、button、input[type="button"]、带onclick的div - 值只能是
transparent或rgba(0,0,0,0)；写成none、unset、initial全部无效 - 如果用了 CSS-in-JS 或 Shadow DOM，得确认样式真正应用到了宿主节点，而不是被封装隔离了
哪些元素会被高亮？别漏掉非标准按钮
很多人只处理 a 和 button，结果发现 div 点击仍有蓝框——因为高亮触发条件是「可激活性」，不是标签名：
- 显式绑了
onclick、ontouchstart的div或span - 设置了
role="button"或tabindex="0"的元素 -
label（尤其包裹了input[type="checkbox"]时） - 自定义组件中用
addEventListener('click', ...)监听的任意容器
建议统一收口：用选择器 a, button, [onclick], [role="button"], [tabindex]:not([tabindex="-1"]) { -webkit-tap-highlight-color: transparent; }
真机测试时还看到高亮？检查这几个干扰项
即使 CSS 写对了，也可能被其他机制覆盖或压制：
-
-webkit-user-select: none在 iOS 15+ 上会干扰 tap 高亮捕获，导致样式失效 - viewport 设置了
user-scalable=no，某些 Android WebView 会忽略该声明 - UI 框架（如 Vant、Ionic）自带重置规则，你的样式得后加载，或提高权重（例如加
!important，仅限兜底） - Chrome for Android 已逐步弃用该属性，但 iOS Safari 必须靠它——别指望一套规则通吃所有平台
关掉之后用户点不点得着？补反馈比关更重要
去掉系统高亮不等于交互完成，反而容易让触控体验变“发虚”：
- 别只依赖
:active，它在 iOS 上有约 300ms 延迟；要同步响应，得加touch-action: manipulation - 更稳的方式是 JS 监听
touchstart/touchend手动切 class，再配opacity或transform: scale() - 如果用了
outline: none清焦点环，务必补上box-shadow或border，否则键盘用户完全找不到当前焦点
真正难处理的是混合事件场景：一个元素同时绑了 click、touchstart 和 FastClick，高亮可能被拦截、延迟甚至复现两次——这时候得用真机 + 连续点击反复验证，模拟器看不出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
