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