Element: gotpointercapture event
The gotpointercapture
event is fired when an element captures a pointer using setPointerCapture()
.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("gotpointercapture", (event) => {});
ongotpointercapture = (event) => {};
Event type
A PointerEvent
. Inherits from Event
.
Event properties
This interface inherits properties from MouseEvent
and Event
.
PointerEvent.pointerId
Read only-
A unique identifier for the pointer causing the event.
PointerEvent.width
Read only-
The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer.
PointerEvent.height
Read only-
The height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer.
PointerEvent.pressure
Read only-
The normalized pressure of the pointer input in the range
0
to1
, where0
and1
represent the minimum and maximum pressure the hardware is capable of detecting, respectively. PointerEvent.tangentialPressure
Read only-
The normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range
-1
to1
, where0
is the neutral position of the control. PointerEvent.tiltX
Read 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.tiltY
Read 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.twist
Read only-
The clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range
0
to359
. PointerEvent.pointerType
Read only-
Indicates the device type that caused the event (mouse, pen, touch, etc.).
PointerEvent.isPrimary
Read only-
Indicates if the pointer represents the primary pointer of this pointer type.
Examples
This example gets a <p>
element and listens for the gotpointercapture
event. It then calls setPointerCapture()
on the element on a pointerdown
event, which will trigger gotpointercapture
.
js
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 the ongotpointercapture
event handler property:
js
const para = document.querySelector("p");
para.ongotpointercapture = () => {
console.log("I've been captured!");
};
para.addEventListener("pointerdown", (event) => {
para.setPointerCapture(event.pointerId);
});
Specifications
Specification |
---|
Pointer Events # the-gotpointercapture-event |
Pointer Events # dom-globaleventhandlers-ongotpointercapture |
Browser compatibility
BCD tables only load in the browser