Touch events

See more on JavaScript events

Touch events are the events triggered when viewing a page on a touch device, like a smartphone or a tablet. They let you react to fingers touching the screen, moving across it, and lifting off, including multiple fingers at once.

We have 4 touch events:

• touchstart a touch event has started (the surface is touched)
• touchend a touch event has ended (the surface is no longer touched)
• touchmove the finger (or whatever is touching the device) moves over the surface
• touchcancel the touch event has been cancelled

You listen for them like any other event:

const link = document.getElementById('my-link')
link.addEventListener('touchstart', (event) => {
  // touch event started
})

What’s inside the event

Every time one of those events fires we are passed a touch event object.

Since more than one finger can touch the screen at the same time, the event doesn’t carry a single position. It carries lists of touch points:

• touches every finger currently on the screen
• targetTouches the fingers currently on the element that fired the event
• changedTouches the fingers involved in this specific event (for touchend, the ones that just lifted)

Each item in those lists is a Touch object, with these properties:

• identifier an unique identifier for this specific touch point. Used to track multi-touch events. Same finger = same identifier.
• clientX / clientY the x and y coordinates relative to the browser window, regardless of scrolling
• screenX / screenY the x and y coordinates in the screen coordinates
• pageX / pageY the x and y coordinates in the page coordinates (including scrolling)
• target the element touched

So to track a single finger while it moves, you read the first item of changedTouches:

const area = document.getElementById('drawing-area')

area.addEventListener('touchmove', (event) => {
  const touch = event.changedTouches[0]
  console.log(touch.clientX, touch.clientY)
})

Moving one finger across the element logs a stream of coordinate pairs, one per event.

Watch out for scrolling

A common surprise: you call event.preventDefault() inside a touchmove handler to stop the page from scrolling, and nothing happens. The browser also prints a warning in the console.

That’s because browsers treat touchstart and touchmove listeners added on window, document, or body as passive by default, to keep scrolling smooth. A passive listener is not allowed to cancel the event.

The fix is to declare the listener as non-passive:

area.addEventListener('touchmove', (event) => {
  event.preventDefault()
}, { passive: false })

Only do this on the specific element that needs it, since it forces the browser to wait for your handler before scrolling.

Want me to talk about your product? You can sponsor this site.