在Safari Mobile和jQuery on（）函数中点击突出显示，产生巨大的亮点 [英] Tap highlight in Safari Mobile and jQuery on() function produce huge highlight

问题描述

我在iOS的Safari Mobile Browser上使用jQuery的 on（）函数：

  $（＃content）。on（。element，click（function（）{do stuff}）; 
  

点击 .element Safari会突出显示整个 #content

使用

$ b $

  $（。element）click（function（）{do stuff}）; 
   
 
而是右边的区域被突出显示我想这是预期的行为，但它不是直观的用户，所以我正在寻找一个解决方法。
 
 
 
我知道我可以通过使用 -webkit-tap-highlight-color：rgba（0,0,0,0）; 但是我认为突出显示实际上是非常有用的，因为CSS'hover在移动设备上已经没有用了。
 
 
 
  jQuery的on函数和Safari Mobile获得 .element ？的点按高亮
解决方案
我通过以下方式解决：
 
 
放置 document.addEventListener ，function（）{}，true）; 在文档就绪函数中启用css ：active  pseude class 
 
 
完全停用点按高亮显示： -webkit-tap-highlight-color：rgba（0,0,0,0）;  
 
 
添加 .element：active {background：#cccccc;}  
 
 
这样，点击的（活动）元素在触摸时会获得漂亮的灰色背景。
 
I am using jQuery's on() function on iOS' Safari Mobile Browser like this:
$("#content").on(".element", click(function(){ do stuff});
When clicking on .element Safari highlights the whole #content area instead of just the area .element takes.

When using 
$(".element").click(function(){do stuff});
instead the right area is highlighted. I guess this is the expected behavior but it's not intuitive for the user at all, so I'm looking for a workaround.

I know I can get rid of the highlighting completely by using -webkit-tap-highlight-color: rgba(0,0,0,0); but I think the highlight is actually pretty useful generally since CSS' hover isn't useful on mobile devices already.

Is there a way with jQuery's on function and Safari Mobile to get the tap highlight of the .element?
解决方案
I solved it the following way: 

Put document.addEventListener("touchstart", function(){}, true); in document ready function enabling the css :active pseude class
Disabling the tap highlight completely: -webkit-tap-highlight-color: rgba(0,0,0,0);
Adding .element:active{background: #cccccc;}
This way the clicked (active) element gets a nice gray background when touched.

                        
这篇关于在Safari Mobile和jQuery on（）函数中点击突出显示，产生巨大的亮点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！