Interface Touch

The Touch interface represents a single contact point on a touch-sensitive device. The contact point is commonly a finger or stylus and the device may be a touchscreen or trackpad.

MDN Reference

interface Touch {
    clientX: number;
    clientY: number;
    force: number;
    identifier: number;
    pageX: number;
    pageY: number;
    radiusX: number;
    radiusY: number;
    rotationAngle: number;
    screenX: number;
    screenY: number;
    target: EventTarget;
}
Index
clientX clientY force identifier pageX pageY radiusX radiusY rotationAngle screenX screenY target
clientX: number

The Touch.clientX read-only property returns the X coordinate of the touch point relative to the viewport, not including any scroll offset.

MDN Reference

clientY: number

The Touch.clientY read-only property returns the Y coordinate of the touch point relative to the browser's viewport, not including any scroll offset.

MDN Reference

force: number

The Touch.force read-only property returns the amount of pressure the user is applying to the touch surface for a Touch point.

MDN Reference

identifier: number

The Touch.identifier returns a value uniquely identifying this point of contact with the touch surface. This value remains consistent for every event involving this finger's (or stylus's) movement on the surface until it is lifted off the surface.

MDN Reference

pageX: number

The Touch.pageX read-only property returns the X coordinate of the touch point relative to the viewport, including any scroll offset.

MDN Reference

pageY: number

The Touch.pageY read-only property returns the Y coordinate of the touch point relative to the viewport, including any scroll offset.

MDN Reference

radiusX: number

The radiusX read-only property of the Touch interface returns the X radius of the ellipse that most closely circumscribes the area of contact with the touch surface. The value is in CSS pixels of the same scale as Touch.screenX.

MDN Reference

radiusY: number

The radiusY read-only property of the Touch interface returns the Y radius of the ellipse that most closely circumscribes the area of contact with the touch surface. The value is in CSS pixels of the same scale as Touch.screenX.

MDN Reference

rotationAngle: number

The rotationAngle read-only property of the Touch interface returns the rotation angle, in degrees, of the contact area ellipse defined by Touch.radiusX and Touch.radiusY. The value may be between 0 and 90. Together, these three values describe an ellipse that approximates the size and shape of the area of contact between the user and the screen. This may be a relatively large ellipse representing the contact between a fingertip and the screen or a small area representing the tip of a stylus, for example.

MDN Reference

screenX: number

Returns the X coordinate of the touch point relative to the screen, not including any scroll offset.

MDN Reference

screenY: number

Returns the Y coordinate of the touch point relative to the screen, not including any scroll offset.

MDN Reference

target: EventTarget

The read-only target property of the Touch interface returns the (EventTarget) on which the touch contact started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document. Note that if the target element is removed from the document, events will still be targeted at it, and hence won't necessarily bubble up to the window or document anymore. If there is any risk of an element being removed while it is being touched, the best practice is to attach the touch listeners directly to the target.

MDN Reference

Was this helpful?