Convert Click to Touch Events

Have you ever noticed the delay that occurs between the time you tap your screen and page activity?

On touchscreen devices, the onclick event doesn’t fire immediately. Instead, the device waits up to a half a second. This provides the user with an opportunity to initiate some other gesture instead of a click.

Use the touchend event instead, which fired immediately when the user taps the screen. You may still want to handle the onclick event to ensure that the browser changes the appearance of the button to show a clicked state, and to support browsers that don’t handle touch events.

To prevent duplicate code of execution when both touched and onclick code fire, add a click event handler that calls preventDefault and stopPropagation if the click was the result of a user tap already handled by touchend.

Note: A jQuery plugin alternative would jquery.tap or touché.

Leave a Reply

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