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 online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
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)