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 surfacetouchcancel
the touch event has been cancelledEvery 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 scrollingscreenX
/ screenY
the x and y coordinates of the mouse pointer in the screen coordinatespageX
/ pageY
the x and y coordinates of the mouse pointer in the page coordinates (including scrolling)target
the element touched