Today, we had a client ask a simple question about how to prevent the “delay tap” problem on touch devices.
While this problem can be solved with several jQuery plugins (1)(2), the answer to the problem is a simple one: Listen for the touchstart event.
This is how we would write it out in jQuery:
[gist id=”5778273″]
Notice how we placed in two listeners. One for touchstart and another for click. This is super helpful if you are doing a responsive layout and want to reuse elements. For instance, we like to reuse as much as possible in our layouts and hate doubling up our code in order to make it work on both mobile and desktop.
With the use of multiple listeners in an ‘on’ event we dont have to worry about writing the same listener twice and causing repetitive code.
How it Works:
On touch devices the touchstart event always gets triggered before a click event (which can be delayed up to 200ms), which allows for a snappy response on all click enabled pieces of your content. The important component of this function isn’t the touchstart or the click. It’s actually the ‘e.preventDefault()’ that we placed inside. The e argument represents the event that jQuery intercepted, and calling the preventDefault function will stop later events from firing for the same action. So on touch devices, our function is triggered in response to the ‘touchstart’ event and on desktop, we execute in response to the ‘click’ event.
If ‘e.preventDefault()’ wasn’t declared, our code would get executed twice, resulting in a double tap bug which causes something to open twice. This can cause all sorts of headaches and weird outcomes. So, it is essential when doing this, you place in the ‘e.preventDefault()’.
If you have any questions, please leave us a comment!