← flaviocopes.com

Touch events

Published Aug 27 2019

Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! ✨

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

I write books for developers 👇🏼