Click delay

There is a click delay in mobile web page. You may try the demo here 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 mouneup event 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.

What’s next? We’re going to take a look at “Using slick”.