在Safari Mobile中点按高亮显示，jQuery on（）函数会产生巨大的亮点

Question

我在iOS'Safari Mobile Browser上使用jQuery的on()函数，如下所示：

$("#content").on(".element", click(function(){ do stuff});

点击.element Safari会突出显示整个#content区域而不只是.element区域。

使用时

$(".element").click(function(){do stuff});

而是突出显示右侧区域。我想这是预期的行为，但对用户来说根本不直观，所以我正在寻找一种解决方法。

我知道我可以通过-webkit-tap-highlight-color: rgba(0,0,0,0);完全摆脱突出显示，但我认为突出显然非常有用，因为CSS'悬停在移动设备上没有用。

有没有办法让jQuery的功能和Safari Mobile获得.element的点击高亮？

Answer 1

我通过以下方式解决了这个问题：

1. 将document.addEventListener("touchstart", function(){}, true);放入文档就绪函数中，启用css :active pseude class
2. 完全禁用点击突出显示：-webkit-tap-highlight-color: rgba(0,0,0,0);
3. 添加.element:active{background: #cccccc;}

这样点击（活动）元素在触摸时会获得漂亮的灰色背景。