Reality is more inconsistent than in this card. Do your own tests here for all devices you need to support.
Touch devices have their
own set of events
Show archive.org snapshot
like touchstart
or touchmove
. Because mobile browsers should also work with with web applications that were build for mouse devices, touch devices also fire classic mouse events like mousedown
or click
.
When a user follows a link on a touch device, the following events will be fired in sequence:
touchstart
touchend
mousemove
mousedown
mouseup
click
The sequence can be canceled by either
touchstart
event.preventDefault()
on the touchstart
eventevent.preventDefault()
on the touchend
eventsIf the sequence is canceled, the subsequents mouse events will never fire. Only these events will fire:
touchstart
touchend
When you call event.preventDefault()
on the touchstart
or touchend
event, you can prevent the subsequent mouse events:
$('.elem').on('touchstart', (event) => { event.preventDefault() })
Note that an event handler bound to a parent element (here document
) can not cancel the sequence:
$(document).on('touchstart', '.elem', (event) => { event.preventDefault() })
There seems to be an inconsistency with current (2018-04) Chrome versions, where an event handler bound to the document
can cancel the sequence when it calls event.preventDefault()
on an touchend
event.