在Safari移动的中点击高亮,jQuery on()函数会产生巨大的高亮

8gsdolmq  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(103)

我在iOS的Safari移动的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的on函数和Safari移动的来获得.element的点击突出显示?

yvt65v4c

yvt65v4c1#

我用下面的方法解决了这个问题:
1.将document.addEventListener("touchstart", function(){}, true);放入文档就绪函数中,启用css :active伪类
1.完全禁用水龙头突出显示:-webkit-tap-highlight-color: rgba(0,0,0,0);
1.添加.element:active{background: #cccccc;}
这样,点击的(活动的)元素在被触摸时会得到一个漂亮的灰色背景。

相关问题