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

我在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);完全消除突出-webkit-tap-highlight-color: rgba(0,0,0,0); 但我认为这个亮点实际上非常有用，因为CSS’hover在移动设备上已经无用了。

有没有办法使用jQuery的function和Safari Mobile获得.element的点击高亮？

Answer 1

我通过以下方式解决了它：

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

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