Touch events

By Flavio Copes

Learn the basics of touch events in JavaScript, handling touchstart, touchend, touchmove, and touchcancel to track taps and multitouch on mobile devices.

See more on JavaScript events

Touch events are those events that are triggered when viewing the page on a mobile device, like a smartphone or a tablet.

They allow you to track multitouch events.

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

Every time a touch event occurs we are passed a touch event:

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

Here are all the properties we can access on that event

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

Related posts about platform: