Read more

Event order when clicking on touch devices

Henning Koch
April 05, 2018Software engineer at makandra GmbH

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.

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

When a user follows a link on a touch device, the following events will be fired in sequence:

  • touchstart
  • touchend
  • mousemove
  • mousedown
  • mouseup
  • click

Canceling the event sequence

The sequence can be canceled by either

  1. dragging the finger after touchstart
  2. touching the element for a long time
  3. an JavaScript event handler calling event.preventDefault() on the touchstart event
  4. an JavaScript event handler calling event.preventDefault() on the touchend events

If the sequence is canceled, the subsequents mouse events will never fire. Only these events will fire:

  • touchstart
  • touchend

Caveats when canceling with JavaScript

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.

Posted by Henning Koch to makandra dev (2018-04-05 14:23)