Fast JavaScript Click Event for Touch Devices

Click Events

When working on a web app for touch devices (iPhone / iPad), you will soon notice that click events are rather slow to fire. There is a delay due to the fact that the device waits for the user to complete a gesture before deciding that the intended gesture was in fact a click.

I wrote a simple script that detects whether the device is touched without moving. When tapped without move, it fires a custom event named “fast click”. This alternative event fires much faster then an ordinary click event.

A normal click event takes approximately 450 milliseconds to fire, in contrast the “fastclick” event takes approximately only 60 milliseconds to fire.

Demo

http://sandbox.juurlink.org/fastclick/ (open in mobile browser)

Sources

Sources are available through GitHub. Contributions are welcome via GitHub pull requests.

https://github.com/kozmoz/fastclick

Update 2012-06-15: There exists a much better and more complete alternative now. Please use Hammer.js instead. Hammer.js is an easy implementation of touch events in your website. But if on the other hand the only thing you need is a “tap” event, then this simple lightweight code should be fine.

Update 2013-06-17: New on GitHub, a project with the exact same name, but far more active maintained: https://github.com/ftlabs/fastclick.

2 thoughts on “Fast JavaScript Click Event for Touch Devices”

  1. Nice one!
    But multiple clicking / tapping results in negative time results at times … may I go back into the past with that check? 🙂 Looks like the time measurement is not working correctly, but this might be a JavaScript issue.

Leave a Reply

Your email address will not be published. Required fields are marked *