When doing web development for mobile devices, it’s important to optimize all your code for the minimally powered devices (when compared to desktop computers).

A lot of developers get lazy when it comes to JavaScript events, especially for sites that you assume will get visitors that are on both full powered computers as well as mobile devices (smart phones, tablets, etc.).

Where this suffers greatly in particular is “click” events. A lot of web sites and web apps rely on interaction and the most common form is a mouse click when it comes to desktops. Most touch capable devices that run Android or iOS will properly translate / synthesize the click event when you touch.

The laziness may be partially due to simply not knowing about the differences, but for myself I simply assumed “Why write extra code? onClick seems to work just fine for both desktop/touch mobile devices.” Sure it works, just not quite as snappy as you might expect.

The problem is that this comes at a cost to responsiveness. Since you can swipe, pinch etc on these devices, they typically have a minor delay to ensure all you’re doing with your finger is tapping.

This was something Bryan McQuade from Google’s Page Speed team brought up during a recent webinar. It makes perfect sense! So when it comes down to that tap/click event you’re looking for, you’ll save 300 – 500 ms in response time if you monitor on the “touchstart” event instead of the “click” event.

Obviously this only works on touch capable devices, therefore you’ll want to use some sort of detection to setup your event listeners.

This example is based on using zepto.js & Modernizr, but this can easily be adapted to native JS or another library quite easily.

You get the idea here. You’ll be amazed at the night and day difference. Here’s a video that’s comparing the native touchstart event vs click event.