移动端点击按钮的蓝色高亮是 WebKit 浏览器默认的 tap-highlight-color 效果，应通过 CSS 设置 -webkit-tap-highlight-color: transparent 禁用，仅作用于按钮等可点击元素，避免全局设置，并搭配 :active 状态样式提升反馈体验。
移动端点击按钮时出现的蓝色高亮（俗称“点击蒙层”），其实是 Safari、Chrome for iOS 等 WebKit 内核浏览器默认的 tap-highlight-color 效果。它本意是提供触控反馈，但常与设计风格冲突，显得突兀。解决方法不是靠 JavaScript 拦截事件，而是用 CSS 直接禁用或自定义该高亮色。
禁用默认蓝色高亮
最常用且推荐的做法是将 -webkit-tap-highlight-color 设为完全透明：
-webkit-tap-highlight-color: transparent;
}
注意：该属性仅在支持 WebKit 的移动端浏览器生效（iOS Safari、Android Chrome 等），桌面端无效也无需设置。只需加在按钮、链接、或其他可点击元素上即可。
只对特定元素禁用，避免影响全局
不建议直接写在 * {} 或 body {} 里，容易误伤需要反馈的组件（如输入框聚焦、可访问性焦点环）。推荐按需添加：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 给按钮类统一加：
.btn, .icon-btn { -webkit-tap-highlight-color: transparent; } - 对
<a>标签，若用于跳转且无 hover/focus 样式，也可加该声明 - 若使用伪类模拟按钮（如
div[role="button"]），同样需要显式设置
替代方案：用更可控的交互反馈代替
禁用高亮后，用户可能感觉“没点到”。建议搭配轻量级视觉反馈提升体验：
- 添加
:active状态样式，比如背景色微调、文字缩放 95%、box-shadow 压感效果 - 配合
transition: background-color 0.1s让变化更自然 - 对关键操作按钮（如提交、确认），可叠加轻微震动动画（
transform: scale(0.98)）
基本上就这些。禁用 tap-highlight-color 是移动端 CSS 交互优化的基础项，不复杂但容易忽略。记得测试真机效果——模拟器有时不触发该高亮，真机点一下才见分晓。
