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

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