Elimine el retraso de 300 ms en los eventos de clic en mobile Safari

Este plugin-FastClick desarrollado por Financial Times lo hace perfectamente para usted!

Asegúrese de agregar event.stopPropagation(); y / o event.preventDefault(); directamente después de la función de clic, de lo contrario podría ejecutarse dos veces como lo hizo para mí, es decir:

$("#buttonId").on('click',function(event){
    event.stopPropagation(); event.preventDefault();
   //do your magic

});

Sé que esto es viejo, pero ¿no puedes probar para ver si "touch" es compatible con el navegador? Luego cree una variable que sea "touchend" o "click" y use esa variable como el evento que se vincula a su elemento?

var clickOrTouch = (('ontouchend' in window)) ? 'touchend' : 'click';
$('#element').on(clickOrTouch, function() {
    // do something
});

De modo que code sample comprueba si el evento "touchend" está soportado en el navegador y si no, entonces usamos el evento "click".

(Editar: cambiado "touchend" a "ontouchend")

Me he encontrado con una alternativa muy popular llamada Hammer.js (Github page) que creo que es el mejor enfoque.

Martillo.js es una biblioteca táctil más completa (tiene muchos comandos de deslizamiento) que Fastclick.js (respuesta más votada).

Pero ten cuidado: desplazarse rápido en dispositivos móviles tiende a bloquear la interfaz de usuario cuando usas cualquiera de los dos Hammer.js o Fastclick.js. Este es un problema importante si su sitio tiene una fuente de noticias o una interfaz donde los usuarios se desplaza mucho (parecería como la mayoría de las aplicaciones web). Por esta razón, no estoy usando ninguno de estos plugins en este momento.

De alguna manera, desactivar el zoom parece desactivar este pequeño retraso. Tiene sentido, ya que el doble toque ya no es necesario.

¿Cómo puedo "desactivar" el zoom en una página web móvil?

Pero tenga en cuenta el impacto en la usabilidad que esto tendrá. Puede ser útil para páginas web diseñadas como aplicaciones, pero no debe usarse para páginas 'estáticas' de propósito más general en mi humilde opinión. Lo uso para un proyecto de mascotas que necesita baja latencia.

Desafortunadamente no hay una manera fácil de hacer esto. Así que solo usar touchstart o touchend te dejará con otros problemas como que alguien comience a desplazarse cuando haga clic en un botón, por ejemplo. Usamos zepto por un tiempo, e incluso con este marco realmente bueno hay algunos problemas que surgieron con el tiempo. Muchos de ellos soncerrados , pero parece que no es un campo de solución simple.

Tenemos esta solución para manejar globalmente los clics en los enlaces:

   $(document.body).
    on('tap', 'a',function (e) {
      var href = this.getAttribute('href');
      if (e.defaultPrevented || !href) { return; }
      e.preventDefault();
      location.href= href;
    }).
    on('click', 'a', function (e) {
      e.preventDefault();
    });

Busqué una manera fácil sin jquery y sin biblioteca fastclick. Esto funciona para mí:

var keyboard = document.getElementById("keyboard");
var buttons = keyboard.children;
var isTouch = ("ontouchstart" in window);
for (var i=0;i<buttons.length;i++) {
    if ( isTouch ) {
        buttons[i].addEventListener('touchstart', clickHandler, false);         
    } else {
        buttons[i].addEventListener('click', clickHandler, false);          
    }
}

Solo para proporcionar información adicional.

En iOS 10, los <button> s de mi página no se podían activar continuamente. Siempre había un retraso.

Intenté fastclick / Hammer / tapjs / reemplazar click con touchstart, todo falló.

ACTUALIZACIÓN: la razón parece ser que el botón está demasiado cerca del borde! moverlo a cerca del centro y lag gone!

Se supone que debes declarar explícitamente el modo pasivo :

window.addEventListener('touchstart', (e) => {

    alert('fast touch');

}, { passive : true});

En jQuery puedes enlazar el evento "touchend", que activa el código inmediatamente después de tocar (es como un keydown en el teclado). Probado en las versiones actuales de Chrome y Firefox Tablet. No olvide "haga clic" también, para sus computadoras portátiles de pantalla táctil y dispositivos de escritorio.

jQuery('.yourElements').bind('click touchend',function(event){

    event.stopPropagation();
    event.preventDefault();

	// everything else
});