Touch

The Touch API provides access to touch events generated by a touchscreen or other touch-sensitive input devices. It allows web applications to respond to user gestures such as taps, swipes, pinches, and rotations.

Each touch point contains information such as its coordinates, the element it interacts with, and a unique identifier.

Modern touchscreens can detect multiple simultaneous points of contact.

Usage

<canvas {{ stimulus_controller('@pwa/touch')></canvas>

Parameters

None

Actions

None

Targets

None

Events

started: Emitted for each new contact detected. Can fire multiple times if multiple fingers touch the screen simultaneously. The event contains the native Touch object.

moved: Emitted for each contact that moves. The event contains the native Touch object.

cancelled: Emitted when a contact is canceled by the browser or OS (e.g., context switch, gesture interruption). The event contains the native Touch object.

ended: Emitted when a contact ends.

updated: Emitted after each native event, once per DOM event cycle. Provides a full snapshot of all active touches managed by the controller. Useful for multi-touch gestures (e.g., pinch-zoom, rotation) since it reflects the complete state of all contact points.

{
    touches: Array<{
        identifier: number;
        clientX: number;
        clientY: number;
        pageX: number;
        pageY: number;
        screenX: number;
        screenY: number;
        radiusX: number;
        radiusY: number;
        force: number;
        rotationAngle: number;
        top: number;
        left: number;
    }>
}