cordova - Elimina la demora de 300 ms de las aplicaciones de phonegap

apache cordova phonegap

Question

He intentado hacer que mi aplicación sea más receptiva, pero desafortunadamente nada parece ayudar. Estoy usando PhoneGap y, por lo tanto, estoy experimentando el famoso retraso de 300 ms para eventos táctiles.

Esto hace que la aplicación se sienta muy poco receptiva y lenta, lo que simplemente no es una opción.

Vi algunas bibliotecas como Fastclick.js que resuelven este problema para usuarios móviles de jQuery, pero no estoy usando jQuery mobile. Estoy haciendo que mi aplicación solo use HTML, CSS, JavaScript y jQuery.

Realmente necesito encontrar una manera de deshacerme de esa demora de 300 ms para mis clics táctiles. Esperando cualquier ayuda que pueda obtener.

Gracias.

Answer 1

Fastclick no funciona para mí. Tal vez no sea compatible con Phonegap o la vista web que está usando.

La única manera de arreglar el retraso de 300ms en Phonegap / cordova:

$(''yourElement'').on( ''touchstart'', function ( startEvent ) {});

en lugar de onclick Cualquier otra solución, incluido el fastclick, no funcionó en Phonegap.

Answer 2

Christophe Coenraets ha abordado este tema en sus 10 mejores técnicas de rendimiento para aplicaciones PhoneGap . Es el # 6 y el video está disponible en Adobe TV (en el minuto 31).

Básicamente, la demora de 300 ms no es un error o un problema de rendimiento, es una característica necesaria para detectar el posible doble toque .

La solución para deshacerse de ese retraso es usar una combinación de eventos touch lugar del evento click con algo como esto:

var trackingClick = false;
var targetElement = null;
var touchStartX = 0;
var touchStartY = 0;
var touchBoundary = 10;

target.addEventListener(''touchstart'', function(event) {

    trackingClick = true;
    targetElement = event.target;
    touchStartX = event.targetTouches[0].pageX;
    touchStartY = event.targetTouches[0].pageY;

    return true;
});

target.addEventListener(''touchend'', function(event) {

    trackingClick = false;

    //handle click event
    ...

    return false;
});

target.addEventListener(''touchmove'', function(event) {
    if (!trackingClick) {
        return true;
    }

    // If the touch has moved, cancel the click tracking
    if (targetElement !== event.target 
        || (Math.abs(event.changedTouches[0].pageX - touchStartX) > touchBoundary 
        || (Math.abs(event.changedTouches[0].pageY - touchStartY) > touchBoundary)) {
        trackingClick = false;
        targetElement = null;
    }

    return true;
});

target.addEventListener(''touchcancel'', function() {
    trackingClick = false;
    targetElement = null;
});

Pero eso es básicamente lo que FastClick está haciendo (de hecho, el fragmento de arriba es solo un ejemplo muy básico arrancado del código fuente de FastClick ). Hay muchos otros casos que manejar, por lo que si no tiene ganas de implementar su propia biblioteca, debería echar un vistazo más de cerca a FastClick. No es solo para usuarios móviles de jQuery , de hecho, ni siquiera necesita jQuery, es solo una biblioteca autónoma de tamaño pequeño.

Nota para usuarios móviles de jQuery: puede usar FastClick, pero debe tener en cuenta la función similar incorporada: vclick

tl; dr: use FastClick si no tiene jQuery Mobile

Answer 3

Lo resolví con una solución súper mínima después de algunos problemas con el clic rápido al activar eventos de clic. Este ejemplo usa jQuery.

$(document).on(''touchstart'', ''.clickable'', function(e){
    // This prevents the click to be completed
    // so will prevent the annoying flickering effect
    e.preventDefault();
});

Tienes que agregar una clase .clickable a cualquier elemento desde el que quieras sacar la demora de 300m.

Luego, cambie todos los eventos de clic para eventos de inicio táctil, así que

$(''#elementid'').click(function(e){
   console.log(''ex event''); 
}

tiene que ser ahora esto

$(document).on(''touchstart'', ''#elementid'', function(e){
   console.log(''new event''); 
}