FastClick

En este capítulo hablaré brevemente sobre FastClick, una librería muy útil que elimina un delay de 300 milisegundos que hay en los navegadores móviles, entre que hacemos una pulsación en algún elemento y se procesa el evento deseado. Esto no sucede en los navegadores de escritorio.

fuente: http://blog.hexacta.com/

El retraso de 300 ms entre el evento touch end y el click esta implementado en el navegador móvil para soportar double taps o dobles pulsaaciones, es decir, espera 300 ms a la espera de recibir otro tap y saber si se trata de un double tap.
El double tap se suele usar en los dispositivos para hacer zoom sobre algún elemento de la página. Ya depende de nosotros si queremos darle esa funcionalidad o eliminarla a cambio de mayor velocidad de respuesta en nuestras aplicaciones móviles.

¿Cómo funciona fastclick? Lo primero que haremos será incluirlo en nuestro html de la siguiente manera:
<script type='application/javascript' src='/donde/quiera/que/este/fastclick.js'></script>

Y lo agregamos a los elementos que queremos que respondan rápidamente.
window.addEventListener('load', function() {
                new FastClick(document.body);
}, false);

En este caso, todo el body. Fastclick captura el evento touchend e inmediatamente dispara el evento click sobre el elemento pulsado, y anula el evento click que disparará el browser 300 ms después, para que no ocurra por duplicado.

En principio parece poco tiempo, pero se nota. Vamos a ver la diferencia entre usar FastClick en nuestras aplicaciones móviles Phonegap y no usarlo.

Tomaremos como base la calculadora implementada en el capítulo anterior. De hecho, ya está implementado FastClick en ella. Para evitar su uso, sólo tenemos que comentar las siguientes líneas en el .html:

window.addEventListener('load', function() {
                new FastClick(document.body);
}, false);

Compilamos la aplicación y al ejecutarla podremos notar ese retraso, y si no lo notamos, vamos a implementar FastClick en todos los botones de la calculadora menos en uno, para que al pulsar ese botón comparemos el tiempo de respuesta respecto a los demás botones. Como apuntaba antes, estas pruebas es conveniente usarlo en un móvil, porque en navegadores de escritorio no sucede este retraso, y no notaremos diferencia alguna.

Descomentamos las líneas que habíamos comentado antes, y compilamos y ejecutamos la calculadora de nuevo. Al incluir la librería FastClick en el html, y añadir las líneas que hemos descomentado, FastClick actúa en todos los "toques" que hagamos en pantalla(porque añadimos el addEventListener en window) de forma automática. Si deseamos que algún elemento cuente con el retraso original de 300 milisegundos, añadimos la clase needsclick al elemento en cuestión.

Si nos fijamos en el código de la tecla 0 de la calculadora, veremos que, a diferencia de las demás, tiene la clase needsclick que hace que FastClick no actúe al pulsarla. Para comprobar la diferencia pulsamos alternativamente la tecla 0 y cualquier otro número, y veremos que el tiempo que tardan en aparecer en la pantalla de la calculadora es diferente.

nota del autor: pensaba que los 300 ms eran cosa de Android, pero parece ser que es cosa de los navegadores web móviles, y nuestra aplicación en definitiva será un webview.