iOS Safari Mobile 图像地图 - 单击时区域显示框

Question

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

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

这是一些代码（只是一个 sn-p）：

<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); }