Element: gotpointercapture event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2020⁩.

Thegotpointercapture event is fired when an element captures a pointer usingsetPointerCapture().

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("gotpointercapture", (event) => { })ongotpointercapture = (event) => { }

Event type

APointerEvent. Inherits fromEvent.

Event properties

This interface inherits properties fromMouseEvent andEvent.

PointerEvent.altitudeAngleRead onlyExperimental: Represents the angle between a transducer (a pointer or stylus) axis and the X-Y plane of a device screen.
PointerEvent.azimuthAngleRead onlyExperimental: Represents the angle between the Y-Z plane and the plane containing both the transducer (a pointer or stylus) axis and the Y axis.
PointerEvent.persistentDeviceIdRead onlyExperimental: A unique identifier for the pointing device generating thePointerEvent.
PointerEvent.pointerIdRead only: A unique identifier for the pointer causing the event.
PointerEvent.widthRead only: The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer.
PointerEvent.heightRead only: The height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer.
PointerEvent.pressureRead only: The normalized pressure of the pointer input in the range0 to1, where0 and1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively.
PointerEvent.tangentialPressureRead only: The normalized tangential pressure of the pointer input (also known as barrel pressure orcylinder stress) in the range-1 to1, where0 is the neutral position of the control.
PointerEvent.tiltXRead only: The plane angle (in degrees, in the range of-90 to90) between the Y–Z plane and the plane containing both the pointer (e.g., pen stylus) axis and the Y axis.
PointerEvent.tiltYRead only: The plane angle (in degrees, in the range of-90 to90) between the X–Z plane and the plane containing both the pointer (e.g., pen stylus) axis and the X axis.
PointerEvent.twistRead only: The clockwise rotation of the pointer (e.g., pen stylus) around its major axis in degrees, with a value in the range0 to359.
PointerEvent.pointerTypeRead only: Indicates the device type that caused the event (mouse, pen, touch, etc.).
PointerEvent.isPrimaryRead only: Indicates if the pointer represents the primary pointer of this pointer type.

Examples

This example gets a<p> element and listens for thegotpointercapture event. It then callssetPointerCapture() on the element on apointerdown event, which will triggergotpointercapture.

const para = document.querySelector("p");para.addEventListener("gotpointercapture", () => {  console.log("I've been captured!");});para.addEventListener("pointerdown", (event) => {  para.setPointerCapture(event.pointerId);});

The same example, using theongotpointercapture event handler property:

const para = document.querySelector("p");para.ongotpointercapture = () => {  console.log("I've been captured!");};para.addEventListener("pointerdown", (event) => {  para.setPointerCapture(event.pointerId);});