300ms delay removal: using fastclick.js vs using ontouchstart

Question

I'm using regular jQuery and I have an event handler that looks like this:

$('#someID').on({

   click: SomeFunction

}, '.SomeClass');

This will produce a 300ms delay on the click event and I'm looking to remove this delay. What's the difference between rewriting this code like that:

$('#someID').on({

   'touchstart': SomeFunction

}, '.SomeClass');

and using an external library like Fastclick.js?

Answer 1

I work for the Financial Times and head up the team that created Fastclick.js.

In principle, all Fastclick does is bind to the touchend event and fire a click event on the same element. However, there are many edge cases, traps and pitfalls, all of which we have discovered, worked around and baked into fastclick. For example:

• If you move your finger during the touch, it's a swipe or other kind of gesture, so we should not react
• If you touch with more than one finger at a time, we should not react
• If you touch a text field, the control needs to gain focus as well as receive a click event
• Some controls require a native click to operate (for security), so we should allow selective opting-out of Fastclick
• Some browsers already support fast clicking when viewport sizing defaults to device-width. We should not activate Fastclick behaviour at all in these user agents.

Since Fastclick is 1% basic premise and 99% edge cases, there are lots of alternatives that are smaller, including probably one that you could write yourself. But many people prefer the reassurance that comes with using a well tested library.

Note that we use touchend and not touchstart because A) a click is not triggered until you lift your finger from the mouse button or trackpad, so touch should mirror that behaviour, and B) until you end the touch we don't yet know if you plan on moving your finger while it's in contact with the screen, which would be a gesture, swipe or scroll rather than a click.

Hope that helps.