iOS Safari移动图像映射 - 单击时显示区域框

Question

所以，这个似乎有点棘手。有一些区域的图像映射，功能如下：

• 点击某个区域，显示工具提示

这是一些代码（只是一个代码段）：

<img src="content/dummy/1_small.jpg" alt="" usemap="#img_1">
<map name="img_1">
    <area shape="rect" coords="150,50,250,150" href="" alt="" />
    <area shape="rect" coords="250,500,350,600" href="" alt="" />
</map>

相应的点击处理程序：

this.areas.click( function (event) {
    var position    = that.areas.index(event.target);
    that.toggleTooltipTouch(position);
    event.preventDefault();
});

哪个工作正常。但是：每当我点击某个区域时，Safari会在触摸事件发生时显示一个稍微透明的小框。如果你打得非常短，它看起来就像是在闪烁。

所以，问题是：如何防止这种行为并且不显示该框？

Answer 1

如iOS dark gray box active style中所述，您必须隐藏点击突出显示框：

img { -webkit-tap-highlight-color: rgba(0,0,0,0); }