Remove the 300ms delay from phonegap apps

Question

I have been trying to make my app more responsive, but unfortunately nothing seems to help. I am using PhoneGap and hence I am experiencing the famous 300ms delay for touch

Answer 1

Fastclick is not working for me. Maybe it doesn't support Phonegap or the webview that it's using.

The only way to fix the 300ms delay in Phonegap/cordova:

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

instead of onclick. Any other solutions, including fastclick didn't work in Phonegap.

Answer 2

I solved it with a super minimal solution after some problems with fastclick when triggering click events. This example uses jQuery.

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

You have to add .clickable class to any element you want to take out the 300m delay from.

Then, change all click events for touchstart events, so this

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

has to be now this

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

Answer 3

Christophe Coenraets has addressed this issue in his Top 10 Performance Techniques for PhoneGap Applications. It's the #6 and the video is available on Adobe TV (at the 31st minute).

Basically, the 300ms delay is not a bug or a performance issue, it's a feature necessary to detect the possible double tap.

The solution to get rid of that delay is to use a combination of touch events instead of the click event with something like this :

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;
});

But that's basically what FastClick is doing (in fact, the above snippet is just a very basic example ripped off of fastclick source code). There are lots of other cases to handle so if you don't feel like implementing your own library, you should really take a closer look at FastClick. It's not only for jQuery mobile users, in fact, it doesn't even need jQuery, it's just a self-contained small footprint library.

Note for jQuery mobile users : you can use FastClick but you should be aware of the built-in similar feature : vclick

tl;dr : use FastClick if you don't have jQuery Mobile