Touch events
Discover the basics of working with touch events in JavaScript
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 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 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
→ Download my free JavaScript Handbook!
THE VALLEY OF CODE
THE WEB DEVELOPER's MANUAL
You might be interested in those things I do:
- Learn to code in THE VALLEY OF CODE, your your web development manual
- Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
- I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
- Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
- Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
- Find me on X