Safari Mobile 中的点击高亮和 jQuery on() 函数产生巨大的高亮

Question

我在 iOS 的 Safari 移动浏览器上使用 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 的 on 函数和 Safari Mobile 来获得.element 的点击高亮？

Answer 1

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

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

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