Toque resaltado en Safari Mobile y jQuery en () la función produce un gran resaltado

Estoy usando la función on() jQuery en on() navegador móvil Safari de iOS de esta manera:

 $("#content").on(".element", click(function(){ do stuff}); 

Al hacer clic en .element Safari, se resalta el área de #content total en lugar de solo el área que toma el elemento.

Cuando usas

 $(".element").click(function(){do stuff}); 

en su lugar, se resalta el área correcta. Supongo que este es el comportamiento esperado pero no es intuitivo para el usuario, así que estoy buscando una solución.

Sé que puedo deshacerme del resaltado completamente usando -webkit-tap-highlight-color: rgba(0,0,0,0); pero creo que lo más destacado es en realidad bastante útil ya que el desplazamiento de CSS ya no es útil en dispositivos móviles.

¿Hay alguna forma con jQuery’s en la función y Safari Mobile para obtener el toque de toque del .element ?

Lo resolví de la siguiente manera:

  1. Coloque document.addEventListener("touchstart", function(){}, true); en la función de documento listo que habilita la clase css :active pseude
  2. Desactivando el toque de luz completamente: -webkit-tap-highlight-color: rgba(0,0,0,0);
  3. Agregando .element:active{background: #cccccc;}

De esta manera, el elemento pulsado (activo) obtiene un bonito fondo gris cuando se toca.