Content: Touch events, solutions for handling click events.
Touch Events
Note: You should use addEventListener
to bind touch events, not on
.
1 | var box = document.querySelector(".box"); |
Event Name | Description |
---|---|
touchstart | Occurs when a finger touches the screen |
touchmove | Occurs as a finger moves across the screen |
touchend | Occurs when a finger leaves the screen |
touchcancel | Occurs when the system stops tracking touch events |
Order of Touch Event Response
- touchstart
- touchmove
- touchend
- onclick (with a 300ms delay)
Touch Event Parameters
- changedTouches: A collection of all changed touch points.
- targetTouches: A collection of touch points on the target element.
- touches: A collection of all touch points on the page.
Note: In the touchend event, the event only records changedTouches.
Coordinates in the changedTouches Collection
- client: Coordinates relative to the viewport.
- page: Coordinates relative to the page.
- screen: Coordinates relative to the screen (including the browser’s toolbar).
touchmove Event
The touchmove event is continuously triggered as the finger moves on the screen.
When building swipe or scroll functionalities, you can use event.preventDefault()
to prevent the default behavior, such as page scrolling.
Resolving Click Event Delay
- Use the
tap
event. - Use the FastClick plugin.
tap Event
Definition of the tap
Event
1 | // A namespace for the tap event |
Usage of the tap
Event
1 | window.onload = function () { |