Prevent 300ms delay on Touch-Devices

Question

There is this built-in delay of 300ms on Android & iOS-devices to capture double-clicks (who uses that on website anyway, speaking of UX?!) I'd like to get rid of that delay & read a lot about the topic but still don't get it why this simple code is not "OK" or would break the UX:

$('a').bind('touchend', function (e) {
    e.preventDefault();
    this.click();
});

For me, it seems to work perfect but I'm sure there are reasons why this shouldn't be done like that. Thanks for pointing me in the right direction!

Answer 1

That simple code says that when the touch (drag) event ends over a link, trigger event "click" on that link. If the users drags his finger on the screen to scroll the page and such a drag ends over a link, the link will be accidentally triggered. That would break the user experience (UX).

The standard method for removing the delay is to use CSS touch-action property. As I'm writing this, it is still not supported by default in Firefox ( about:config has flag layout.css.touch_action.enabled which is false by default ) and Safari still does not support this at all. MSIE, Chrome and Android browser all support this already on all platforms.

In short:

/* Disable double-click to zoom on links, input fields
   and buttons to improve responsiveness */
a, input, button
{
    touch-action: manipulation;
}

Answer 2

Short answer: A click (in mobile) expects you start in the same place you end. A touchend lets you start from anywhere.

Now fastclick and other libraries seems to handle things other than just links, such as button clicks, form interactions, etc. So there's probably some edge cases you'll be missing as well.

But as for "bang for your buck" your thing works great ;-)