安卓 webview 点击后半透明灰色遮罩是 -webkit-tap-highlight-color 的默认行为，需对可点击元素显式设为 transparent 并确保样式优先级、作用域及语义属性（如 role="button"）完备。
安卓 WebView 点击后出现半透明灰色遮罩
这是 -webkit-tap-highlight-color 的默认行为，只在 Android 的 WebKit 内核（包括 Chrome、微信内置浏览器、大部分 Hybrid App）中触发，iOS Safari 默认不显示或表现极弱。它不是 bug，是系统级反馈机制，但常被误认为“样式异常”或“点击卡顿”。
常见错误现象：
• 点击按钮/链接后闪一下灰黑色遮罩
• 使用 pointer-events: none 无效
• 加了 outline: none 也没用
• 在 Vue/React 里给元素加 @click 或 onClick 后依然出现
- 必须作用于可点击的元素（
a、button、带onclick的div等），纯静态span不会触发 - 值设为
transparent最稳妥；设为rgba(0,0,0,0)在某些旧版 Android（如 4.3）可能失效 - 不能只写在全局
* {}里——部分 Android 浏览器会忽略通配符下的该属性
为什么加了 -webkit-tap-highlight-color: transparent 还有阴影
优先级和继承问题最常见：该样式被更具体的规则覆盖，或没命中目标元素。尤其注意伪类（如 a:active）和框架默认样式（如 Ant Design 的 .ant-btn）可能重置了它。
- 检查 computed styles，确认该属性是否真的生效（不是“strikethrough”状态）
- 如果用 CSS-in-JS（如 styled-components），需显式透传该样式到真实 DOM 节点，不能只写在 wrapper 上
- 部分 UI 库（如 Vant）已默认处理，但自定义组件或
div + @click场景仍需手动加 - 在
body或html上设置无效，必须作用于具体可交互元素或其父容器（且父容器需有cursor: pointer或事件监听）
要不要同时关掉 -webkit-user-select 和 touch-action
不需要。这两个属性和点击高亮无关：-webkit-user-select 控制文字是否可选，touch-action 控制手势响应区域（比如禁用双指缩放）。强行加反而可能引入新问题，比如禁用 touch-action: manipulation 会导致 iOS 上 300ms 延迟回归。
- 仅当业务明确要求禁止长按复制时，才设
-webkit-user-select: none -
touch-action: manipulation推荐保留，它能加速点击响应，且不影响-webkit-tap-highlight-color - 不要在同一个选择器里堆砌一堆 -webkit- 前缀——现代 Android（Chrome 80+）已支持无前缀的
tap-highlight-color，但兼容性仍差，目前必须带前缀
真机调试时发现部分按钮没生效
大概率是元素没有触发“可点击”判定。Android WebView 对“什么算可点击”比桌面端更严格：必须满足至少一项——有 onclick 属性、是 button/a 标签、设置了 role="button"、CSS 中有 cursor: pointer 且绑定了事件监听器。
- React 中用
div onClick={...}时，建议同步加role="button"和tabIndex={0} - Vue 中
@click不会自动加语义属性，需手动补全 - 避免用
display: inline的元素承载点击逻辑——某些 Android 版本下无法触发高亮样式（哪怕它能点） - Shadow DOM 内的元素需要在 shadow root 内单独设置该样式，不能靠外层继承
这个属性看着简单，但生效条件零碎又隐蔽。最容易被忽略的是：它只对“用户主动触发”的点击起作用，JS 模拟的 click() 不会触发，所以自动化测试里看不到，真机一摸就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
