Elimina el retraso de 300 ms en los eventos de clic en Safari móvil

He leído que Safari móvil tiene un retraso de 300 ms en los eventos de clic desde el momento en que se hace clic en el enlace / botón hasta que se activa el evento. La razón del retraso es esperar para ver si el usuario tiene la intención de hacer doble clic, pero desde una perspectiva de UX, esperar 300ms a menudo no es deseable.

Una solución para eliminar este retraso de 300 ms es utilizar el manejo de "tap" de jQuery Mobile. Desafortunadamente, no estoy familiarizado con este marco y no quiero cargar un marco grande si todo lo que necesito es una línea o dos de código que se aplique touchendde la manera correcta.

Como muchos sitios, mi sitio tiene muchos eventos de clic como este:

$("button.submitBtn").on('click', function (e) {   
  $.ajaxSubmit({... //ajax form submisssion
});

$("a.ajax").on('click', function (e) {   
  $.ajax({... //ajax page loading
});

$("button.modal").on('click', function (e) {   
      //show/hide modal dialog
});

y lo que me gustaría hacer es deshacerme del retraso de 300ms en TODOS esos eventos de clic usando un solo fragmento de código como este:

$("a, button").on('tap', function (e) {
 $(this).trigger('click');
 e.preventDefault();
});

¿Es una mala / buena idea?

Ahora, algunos navegadores móviles eliminan la demora de clic de 300 ms si configura la ventana gráfica. Ya no es necesario utilizar soluciones alternativas.

<meta name="viewport" content="width=device-width, user-scalable=no">

Actualmente, es compatible con Chrome para Android , Firefox para Android y Safari para iOS.

Sin embargo, en iOS Safari , tocar dos veces es un gesto de desplazamiento en páginas que no se pueden ampliar. Por esa razón, no pueden eliminar el retraso de 300 ms . Si no pueden eliminar el retraso en las páginas que no se pueden ampliar, es poco probable que lo eliminen en las páginas que se pueden ampliar.

Teléfonos Windows también retienen el retraso de 300 ms en páginas que no se pueden ampliar, pero no tienen un gesto alternativo como iOS, por lo que es posible eliminar este retraso como lo ha hecho Chrome.Puede eliminar el retraso en Windows Phone usando:

html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}

Fuente: http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

ACTUALIZACIÓN 2015 Diciembre

Hasta ahora, WebKit y Safari en iOS tenían un retraso de 350 ms antes de que un solo toque activara enlaces o botones para permitir que las personas acercaran las páginas con un doble toque. Chrome ya cambió esto hace un par de meses usando un algoritmo más inteligente para detectarlo y WebKit seguirá con un enfoque similar . El artículo ofrece una gran comprensión de cómo funcionan los navegadores con gestos táctiles y cómo los navegadores pueden volverse mucho más inteligentes de lo que son hoy.

ACTUALIZACIÓN Marzo 2016

En Safari para iOS, el tiempo de espera de 350 ms para detectar un segundo toque se ha eliminado para crear una respuesta de "toque rápido". Esto está habilitado para páginas que declaran una ventana gráfica con width = device-width o user-scalable = no. Los autores también pueden optar por el comportamiento de toque rápido en elementos específicos utilizando el CSS touch-action: manipulationcomo se documenta aquí (desplácese hacia abajo hasta el encabezado 'Comportamiento de toque rápido de estilo') y aquí .

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

Sin embargo, 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 antiguo, pero ¿no puedes simplemente probar para ver si el navegador es compatible con "touch"? Luego, ¿crear una variable que sea "tocar" o "hacer clic" y usar esa variable como el evento que se vincula a su elemento?

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

Entonces, esa muestra de código verifica si el evento "tocar" es compatible con el navegador y, si no, usamos el evento "clic".

(Editar: cambió "tocar" a "al tocar")

Me encontré con una alternativa muy popular llamada Hammer.js (página de Github) que creo que es el mejor enfoque.

Hammer.js es una biblioteca táctil con más funciones (tiene muchos comandos de deslizamiento) que Fastclick.js (la respuesta más votada).

Sin embargo, tenga cuidado: el desplazamiento rápido en dispositivos móviles tiende a bloquear realmente la interfaz de usuario cuando usa Hammer.js o Fastclick.js. Este es un problema importante si su sitio tiene un suministro de noticias o una interfaz donde los usuarios se desplazarán mucho (parecería que la mayoría de las aplicaciones web). Por esta razón, no estoy usando ninguno de estos complementos en este momento.

De alguna manera, deshabilitar el zoom parece deshabilitar este pequeño retraso. Tiene sentido, ya que ya no es necesario tocar dos veces.

¿Cómo puedo "deshabilitar" 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 debería 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 existe una manera fácil de hacer esto. Entonces, usar touchstarto touchendte dejará con otros problemas, como que alguien comienza a desplazarse al hacer clic en un botón, por ejemplo. Usamos zepto por un tiempo, e incluso con este marco realmente bueno, hubo algunos problemas que surgieron con el tiempo. Muchos de ellos están cerrados , pero parece que no es un campo de solución simple.

Tenemos esta solución para manejar globalmente los clics en 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 mi:

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, <button> los electrónico de mi página no se podían activar continuamente. Siempre hubo un retraso.

Intenté fastclick / Hammer / tapjs / reemplazando el clic con touchstart, todo falló.

ACTUALIZACIÓN: ¡la razón parece ser que el botón está demasiado cerca del borde! ¡muévalo cerca del centro y el retraso desaparecerá!

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

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

    alert('fast touch');

}, { passive : true});

En jQuery puede vincular el evento "touch", que dispara el código inmediatamente después del toque (es como una tecla pulsada en el teclado). Probado en las versiones actuales de tabletas Chrome y Firefox. No olvide "hacer clic" también, para sus computadoras portátiles y dispositivos de escritorio con pantalla táctil.

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

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

	// everything else
});