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

touch move javascript

Question

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

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

Al igual que muchos sitios, mi sitio tiene muchos eventos de clics 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 de la demora de 300 ms en TODOS esos eventos de clics usando un único fragmento de código como este:

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

¿Es esa una mala / buena idea?

Answer 1

Ahora, algunos navegadores móviles eliminan el retraso de 300 ms de clic si configuras la ventana gráfica. Ya no necesita usar soluciones temporales.

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

Actualmente, esto 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 no ampliables. Por esa razón, no pueden eliminar el retraso de 300 ms . Si no pueden eliminar el retraso en las páginas no ampliables, es poco probable que lo eliminen en las páginas con zoom.

Los teléfonos de Windows también retienen la demora de 300ms en páginas no ampliables, pero no tienen un gesto alternativo como iOS por lo que es posible que eliminen este retraso como 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 los grifos únicos activaran enlaces o botones para permitir a las personas acercarse a las páginas con un doble toque. Chrome lo cambió hace un par de meses usando un algoritmo más inteligente para detectarlo y ahora WebKit seguirá con un enfoque similar . El artículo ofrece algunas ideas excelentes sobre cómo los navegadores funcionan con los gestos táctiles y cómo los navegadores aún pueden ser mucho más inteligentes de lo que son hoy en día.

ACTUALIZACIÓN 2016 de marzo

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 ancho = ancho del dispositivo o escalable por el usuario = no. Los autores también pueden optar por un comportamiento de toque rápido en elementos específicos mediante el uso de la propiedad de acción táctil CSS, utilizando el valor de manipulación. Ver http://www.w3.org/TR/pointerevents/#the-touch-action-css-property .

Answer 2

Busqué una manera fácil sin jquery y sin la 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);          
    }
}

Answer 3

De alguna manera, deshabilitar 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 de usabilidad que esto tendrá. Puede ser útil para páginas web diseñadas como aplicaciones, pero no debe usarse para páginas "estáticas" más generales en mi humilde opinión. Lo uso para un proyecto de mascota que necesita baja latencia.

Answer 4

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

Tenemos esta solución para gestionar 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();
    });

Answer 5

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

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

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

 // everything else
});

Answer 6

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 (respuesta más votada).

Sin embargo, ten cuidado: desplazarte rápidamente en dispositivos móviles tiende a bloquear realmente la interfaz de usuario cuando usas 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ían la mayoría de las aplicaciones web). Por esta razón, no estoy usando ninguno de estos complementos en este momento.

Answer 7

Sé que esto es viejo, pero ¿no puedes probar para ver si el navegador admite "tocar"? Luego, crea una variable que sea "touchend" o "click" y usa esa variable como el evento que se vincula con tu elemento.

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

Entonces, ese ejemplo de código comprueba si el evento "touchend" es compatible en el navegador y si no es así, usamos el evento "click".

(Editar: cambió "touchend" a "ontouchend")

Answer 8

Solo para proporcionar algo de información extra.

En iOS 10, <button> s en mi página no se pudo activar continuamente. Siempre hubo un retraso.

Probé FastClick / Hammer / tapjs / reemplazando clic con touchstart, todo falló.

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

Answer 9

¡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

});

Answer 10

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

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

    alert(''fast touch'');

}, { passive : true});