Part 6—Handling touches

31 Click delay

There is a click delay in mobile web page. You may try the #{linkto ‘demo here’, ‘http://mztests.herokuapp.com/jq201/‘, target: ‘blank’} in your mobile devices. Try click on the buttons and see if you find some delays.

This is due to an intension delay, around 300ms, on the system to distinguish touchstart, touchmove, touchend and click event. touchstart, touchmove, touchend is similar to mousedown, mousemove and mouneupevent in the desktop browser environment.

For detail, Matteo Spinelli has created a testing page to compare the touchstart/touchend event and click event.

The following JavaScript overcomes the delay by manually triggering the click event based on the touchstart and touchend.

$("input[type=submit]").bind('touchstart', function(e) {
  e.preventDefault();
});

$("input[type=submit]").bind('touchend', function(e) {
  e.preventDefault();
  $(this).trigger('click');
});

Or we can use the FastClick library.

For gestures reconizing and handling, you may check the Hammer library.

License

Click delay Copyright © by makzan. All Rights Reserved.

Share This Book

Notice: 2nd edition update is work-in-progress. See update logs for details.