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?
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:
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.