javascript - hammer - fastclick node

Retiro de 300 ms de retardo: usando fastclick.js vs utilizando touchstart

Question

Estoy usando jQuery regular y tengo un controlador de eventos que se ve así:

$(''#someID'').on({

   click: SomeFunction

}, ''.SomeClass'');

Esto producirá un retraso de 300 ms en el evento de clic y estoy buscando eliminar este retraso. ¿Cuál es la diferencia entre reescribir este código así?

$(''#someID'').on({

   ''touchstart'': SomeFunction

}, ''.SomeClass'');

y utilizando una biblioteca externa como Fastclick.js ?

Answer 1

Andrew da la respuesta correcta.

En general,

"touchstart" se activará cuando realicemos " click", "swipe", "scroll", etc. Sin embargo, como saben, lo que queremos capturar es "click".

Lo que hace FastClick.js es definir una regla para "hacer clic" . Por ejemplo, podríamos establecer la condición a continuación como un "clic":

Durante el tiempo entre "touchstart" y "touchend" es de 200 ms, en "touchmove", encontramos que no se ha movido ninguna distancia.

De la misma manera, podríamos establecer la condición a continuación como un "desplazamiento":

Durante "touchstart" y "touchend", en "touchmove", encontramos que la distancia se ha movido en el eje y, pero no se produce el movimiento del eje x.

Answer 2

No puedes usar FastClick.js hoy en día:

Nota: A finales de 2015, la mayoría de los navegadores móviles, especialmente Chrome y Safari, ya no tienen un retraso de 300 ms, por lo que fastclick no ofrece beneficios para los navegadores más nuevos y corre el riesgo de introducir errores en su aplicación. Considere cuidadosamente si realmente necesita usarlo.

(Tomado de: Fastclick.js docs)

Answer 3

Para deshacerse del retraso de 300 ms , aquí hay dos opciones:

Opción 1:

De forma predeterminada, habrá un retraso de aproximadamente 300 ms para el evento de clic en webview , lo que resulta en una respuesta / rendimiento muy lento cuando se hace clic en un botón. Puede intentar anular el evento click con el evento ''tap'' en jQuery Mobile para eliminar el retraso: ( Fuente: IBM )

$(''btnId'').on(''tap'', function(e) {
     e.stopImmediatePropagation();
     e.preventDefault();
     ...
});

Opción 2: una interesante

Por defecto, el propio JQuery Mobile CSS ha introducido un largo retraso, me refiero a algunos lugares a 300 ms o 350 ms o 225 ms. Estos retrasos pueden ser optimizados . Yo también modifiqué el CSS predeterminado y reduje la larga demora de 350 ms a 100 ms para la transición de página y fue realmente genial.

Buscar en el Jquery Mobile CSS: animación-duración

JQuery Mobile 1.2.0

En algunos lugares, el retraso se establece en: -webkit-animation-duration:350ms;-moz-animation-duration:350ms mientras que en otros lugares el retraso es: -webkit-animation-duration:225ms;-moz-animation-duration:225ms

La última versión en github:

.in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 350ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 350ms;
    animation-timing-function: ease-out;
    animation-duration: 350ms;
}
.out {
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 225ms;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 225ms;
    animation-timing-function: ease-in;
    animation-duration: 225ms;
}

Compruebe este código github :

Ahora depende de usted qué retraso desea optimizar, como hacer clic, transición de página, voltear, deslizar, etc. y, en consecuencia, simplemente modificar el tiempo de retraso predeterminado con su propio tiempo de retraso deseado.

De esta manera NO hay necesidad de una biblioteca extra

Answer 4

Si vas a un sitio que no está optimizado para dispositivos móviles, comienza a alejarse para que puedas ver el ancho completo de la página. Para leer el contenido, puede pellizcar el zoom o tocar dos veces el contenido para ampliarlo a todo el ancho. Este doble toque es el que mata el rendimiento, porque con cada toque tenemos que esperar para ver si se puede convertir en un doble toque, y esa espera es de 300 ms. Así es como se desarrolla:

• touchstart
• toque
• Espera 300ms en caso de otro toque.
• hacer clic

Esta pausa se aplica a eventos de clics en JavaScript, pero también a otras interacciones basadas en clics, como enlaces y controles de formulario.

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

Fastclick.js resuelve el problema relacionado si el usuario no quería hacer clic en el elemento y simplemente decidió desplazarse.

Answer 5

Trabajo para el Financial Times y encabezo el equipo que creó Fastclick.js.

En principio, todo lo que hace Fastclick se enlaza con el evento de touchend y dispara un evento de click en el mismo elemento. Sin embargo, hay muchos casos de borde, trampas y escollos, todos los cuales hemos descubierto, hemos trabajado y se han convertido en un clic rápido. Por ejemplo:

• Si mueve el dedo durante el toque, se trata de un golpe u otro tipo de gesto, por lo que no debemos reaccionar.
• Si toca con más de un dedo a la vez, no debemos reaccionar.
• Si toca un campo de texto, el control debe enfocarse y recibir un evento de clic.
• Algunos controles requieren un clic nativo para operar (por seguridad), por lo que debemos permitir la desactivación selectiva de Fastclick
• Algunos navegadores ya son compatibles con los clics rápidos cuando el tamaño de la ventana gráfica se ajusta al device-width . No debemos activar el comportamiento de Fastclick en absoluto en estos agentes de usuario.

Dado que Fastclick es una premisa básica del 1% y un 99% de casos de ventaja, hay muchas alternativas que son más pequeñas, incluso una que podría escribir usted mismo. Pero muchas personas prefieren la tranquilidad que conlleva el uso de una biblioteca bien probada.

Tenga en cuenta que utilizamos touchend y no touchstart porque A) no se activa un clic hasta que levanta el dedo del botón del mouse o del trackpad, por lo que el touch debería reflejar ese comportamiento, y B) hasta que finalice el touch aún no sabemos si planea mover el dedo mientras está en contacto con la pantalla, lo que sería un gesto, deslizar o desplazar en lugar de hacer clic.

Espero que ayude.

Answer 6

la acción de inicio se produce cuando el dedo toca el elemento, mientras que el clic no se disparará hasta que suelte el dedo (toque) en el mismo elemento . Si toca, mueva su dedo fuera del elemento, luego suelte, no se produce ningún evento de clic . Sin embargo, en ese caso, se produce el inicio táctil.

Debido a que etiqueta a Cordova , asumo que es una aplicación híbrida de Cordova para dispositivos móviles.
1. En Android desde 2.3.x, se eliminan 300 ms si desactiva el zoom:

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

2. En Android desde 4.4.3 (cuya vista web es Chrome 33), se eliminan 300 ms si especifica que la página está optimizada para dispositivos móviles:

<meta name="viewport" content="width=device-width" />

3. En IE10 +, usa CSS para eliminar ese retraso:

   -ms-touch-action: manipulación; / * IE10 /
   acción-tacto: manipulación; / IE11 + * /

4. En iOS, no puede usar la ventana gráfica para deshabilitar el retraso de 300 ms

Por lo tanto, para asegurarme de que se eliminen los 300 ms, usualmente uso una biblioteca de tap para tap. Por ejemplo: tappy (solo toque), zepto touch (toque, deslizar - bueno si su sitio ya usa zepto), hammer.js (varios gestos), según sus necesidades. Esos eventos de tap no sufren el problema de 300ms.

FastClick.js debería estar bien, aunque no lo probé todavía.