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\');

<

Answer 1

touchstart happens at the time your finger touches the element while click won't fire until you release your finger (touchend) on the same element. If you touch, move your finger out of the element, then release, no click event occurs. However, in that case, touchstart does occur.

Because you tag Cordova, I assume it is a Cordova hybrid app for mobile.
1. On Android since 2.3.x, 300ms is removed if you disable zoom:

2. On Android since 4.4.3 (whose webview is Chrome 33), 300ms is removed if you specify that the page is mobile-optimized:

3. On IE10+, use CSS to remove that delay:

   -ms-touch-action: manipulation; /* IE10 /
   touch-action: manipulation; / IE11+ */

4. On iOS, you cannot use viewport to disable 300ms delay

Therefore, to make sure the 300ms is removed, I usually use a tap library for tap. For example: tappy (tap only), zepto touch (tap, swipe - good if your site already uses zepto), hammer.js (various gestures), depending on your needs. Those tap events do not suffer from the 300ms problem.

FastClick.js should be OK though I did not try it yet.