removing the onclick delay for webapps for android

Question

Hi i'm building a webapp. To remove the onclick delay i found this script on http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone The code is bascically-

function NoClickDelay(el) {
this.element = el;
if( 'ontouchstart' in window ){  
    console.log("===================touch supported :P")
    this.element.addEventListener('touchstart', this.handleEvent, false);
}                              
}

NoClickDelay.prototype = {
handleEvent: function(e) {
     switch(e.type) {
        case 'touchstart': this.onTouchStart(e); break;
        case 'touchmove': this.onTouchMove(e); break;
        case 'touchend': this.onTouchEnd(e); break;
    }
},

onTouchStart: function(e) {

    //e.preventDefault(); //removed to let the page scroll
    this.moved = false;

    this.element.addEventListener('touchmove', this, false);
    this.element.addEventListener('touchend', this, false);
},

onTouchMove: function(e) {

    this.moved = true;
},

onTouchEnd: function(e) {
    this.element.removeEventListener('touchmove', this, false);
    this.element.removeEventListener('touchend', this, false);

    if( !this.moved ) {
        // Place your code here or use the click simulation below
        var theTarget = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
        if(theTarget.nodeType == 3) theTarget = theTarget.parentNode;

        var theEvent = document.createEvent('MouseEvents');
        theEvent.initEvent('click', true, true);
        theTarget.dispatchEvent(theEvent);
    }
}
};

My question is that this works on iphone/ipad but not on Android. What prevents it from working in android and what can i do to achieve a similar behavior in android and other devices??? please help.

Answer 1

touchToClick or fastclick does not work in my case.

I had a lot of code at onclick events, and I'm using Tappy actually:

onClick event in android webview too slow

Answer 2

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

This disables double-tap zooming, so browser does not wait to detect double-tap. No need to bother with tap events. Sadly, it works only in recent browsers.

Answer 3

We had the same problem and solved it with a slightly different approche. We were able to fix it for iPhone and Android. Clicks will be fired immediately and the delayed events will be ignored. Maybe you can use it:

https://github.com/cargomedia/jquery.touchToClick

Answer 4

In your link there is someone commented about Android solution (I haven't try it):

Android has same problem with laggy onClicks. Your demo doesn’t work on Android, unless I comment out window.Touch below, so I believe that DOM property is only visible on iOS.

function NoClickDelay(el) {
this.element = el;
// if (window.Touch) not available on android
this.element.addEventListener(‘touchstart’, this, false);
}

With the above change Android gets non-laggy touch event!