Tap & click events in mobile web apps, the madness has to stop

by Cedric Dugas on December 1, 2013

You should know by now that when you click on a link in the ios mobile browser there is a 300ms delay. Not so many people know where this come from, in fact it comes all the way back from 2007. Engineers at Apple were trying to figuring out how to add a double tap to zoom in the page, thus the 300ms delay was born so they can differentiate the events.

Now you are probably wondering why the hell we still have that delay today when we use a meta viewport like this:

<meta name="viewport" content="width=device-width">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

We explicitly tell the browser you can’t scale that app, no zoom required. Well actually chrome for android will support it soon (or already has, not really sure about the state of affair), firefox too supports this, but Apple has not. So we still need to use hacks to get around it.

The “tap” event

Obviously this delay was a challenge to any developer wanting to do mobile web apps & as such a lot of events library were born to support a full set of mobile events like swipe, tap & tap hold.

However the issue with the tap event is that it is binded to touchend, so you can’t really stop some events from happening. The best example is using the tap event to switch pages. If you have a form in the new page & a input positioned right where you tapped there is a very good chance that when your new page is shown your cursor will be put in the input as if you clicked on it.

This is a bug I see a lot on stackoverflow with jQuery mobile. Fortunately Chrome for android now have fixed this somehow, but using phonegap you have the same issue since you do not use exactly the same browser engine (have not tested 4.3). The easiest way to fix this is to disable the form, or put an invisible div in front of it with a nice setTimeout(), yeah it’s pretty ugly.

The current tap event is really a lousy way to handle a problem we should not have. Use it if you must but be really careful of how you implement it. Also the w3c’s touch standard is coming, however they have been hit with patent issues some time ago & the spec seems pretty frozen.

The first iPhone was released in 2007 & we still do not have native browser events for mobile web applications, that’s pretty depressing when you think about it.

Microsoft in the mean time implemented its own flavour in IE10, the MSpointer events. It has not been supported at this point by other browsers.

As it often happens with web standards, touch events are really a mess, I hope this can be resolved soon so we take less time implemented shims * more time creating valuable products.

Leave your comment


Required. Not published.

If you have one.