Computer Science
Grade 9
20 min
Touch Events
Touch Events
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Differentiate between single-touch and multi-touch events.
Identify and use the properties of a `TouchEvent` object, such as `touches` and `changedTouches`.
Implement a basic 'pinch-to-zoom' gesture by tracking two touch points.
Implement a basic 'swipe' gesture by tracking the start and end points of a single touch.
Use `event.preventDefault()` to stop default browser actions like scrolling during a custom touch interaction.
Explain the lifecycle of a touch interaction: `touchstart`, `touchmove`, and `touchend`.
Ever wondered how your phone knows you're pinching to zoom in on a photo instead of just tapping? 🤔 Let's unlock the code behind mobile gestures!
In this lesson, we'll dive into advanced touch events, moving b...
2
Key Concepts & Vocabulary
TermDefinitionExample
TouchEventAn event object created when a user interacts with a touch-sensitive surface. It contains information about all current touch points on the screen.When you place two fingers on your phone screen, a single `TouchEvent` is generated containing data for both fingers.
Touch ObjectAn object representing a single point of contact (like one finger) between the user and the touch surface. It contains properties like coordinates.A `Touch` object has properties like `clientX` and `clientY` to tell you exactly where a specific finger is on the screen.
TouchListA list-like collection of `Touch` objects. The most important ones are `event.touches` (all fingers currently on the screen) and `event.changedTouches` (fingers involved in the current event).In a `touchstart` e...
3
Core Syntax & Patterns
The Touch Event Listener Pattern
element.addEventListener('touchevent', function(event) { /* handle event */ });
This is the fundamental pattern for listening to touch events. You select an HTML element and attach a listener for a specific event type (`touchstart`, `touchmove`, `touchend`). The `event` object passed to the function contains all the touch data.
Swipe Detection Logic
1. On `touchstart`, record start coordinates.
2. On `touchend`, record end coordinates.
3. Calculate the difference (delta).
4. If `abs(delta)` > threshold, it's a swipe.
This logic determines if a user performed a swipe. It compares the start and end positions of a single touch to see if it moved far enough in a specific direction to be considered a deliberate gesture.
Mu...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
You are building a map feature where a single-finger swipe pans the map, but a two-finger pinch zooms it. What is the most efficient logic to place inside your `touchmove` event handler to correctly handle both actions?
A.First, run the zoom logic. If it fails, then run the pan logic.
B.First, check the value of `event.touches.length`. If it's 1, run pan logic. If it's 2, run zoom logic.
C.Create two separate event listeners, one for single-touch `touchmove` and one for multi-touch `touchmove`.
D.First, calculate the swipe delta. If it's small, then check for a second finger.
Easy
What is the primary purpose of a `TouchEvent` object in web development?
A.To represent a single finger's contact point on the screen.
B.To contain information about all current touch points related to a single interaction.
C.To store the HTML element that was touched.
D.To change the color of the screen when a touch occurs.
Easy
Which event type is fired at the beginning of a touch interaction, when a user first places their finger on a touch-sensitive surface?
A.touchmove
B.touchend
C.touchstart
D.touchcancel
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free