jquery - 点击 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;}

这样，单击的(事件)元素在触摸时会获得漂亮的灰色背景。