Hybrid App开发：如何禁用<a>元素长按后的灰色遮罩？

这个问题其实是iOS Safari给可点击链接（<a>标签）默认加上的长按高亮/选中效果，哪怕你的href="#"没有实际跳转，浏览器还是会把它识别为可交互的链接元素，触发这个灰色遮罩。这里有几个简单有效的解决方法：

方法一：直接禁用目标元素的高亮效果 #

给你的<a>标签添加-webkit-tap-highlight-color CSS属性，设置为透明就能完全去掉这个灰色遮罩：

/* 针对单个按钮的a标签，建议用类来精准控制 */
a.no-tap-highlight {
  -webkit-tap-highlight-color: transparent;
}

如果想全局禁用所有<a>标签的这个效果，也可以直接写：

a {
  -webkit-tap-highlight-color: transparent;
}

对应的HTML可以改成这样（给a标签加类）：

<a href="#" class="no-tap-highlight">
  <div style="height: 50px; width: 50px; background-color: #00ff00; margin: 32px"></div>
</a>

方法二：替换标签（如果不需要跳转功能） #

如果这些按钮本来就不需要<a>标签的跳转功能（只是用它来绑定点击事件），可以把<a>换成<div>，然后给div添加点击事件，这样从根源上避免浏览器把它识别为链接，自然就不会有长按遮罩了：

<div style="height: 50px; width: 50px; background-color: #00ff00; margin: 32px; cursor: pointer;"></div>

补充说明 #

-webkit-tap-highlight-color是WebKit内核浏览器（比如iOS Safari）的私有属性，专门用来控制点击/长按元素时的高亮颜色，设置为transparent就会完全隐藏这个效果，不会影响其他交互逻辑。

内容的提问来源于stack exchange，提问作者Desmond