Pointer Events | Frontend Practical Guide

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`PointerEvent`	55	12	59	13	55	13
`auxclick_event (type pointerevent)` Is a `PointerEvent`	92	92	129	18.2	92	18.2
`click_event (type pointerevent)` Is a `PointerEvent`	92	92	129	18.2	92	18.2
`contextmenu_event (type pointerevent)` Is a `PointerEvent`	92	92	129	18.2	92
`gotpointercapture_event` The gotpointercapture event is fired when an element captures a pointer using setPointerCapture().	57	17	59	13	57	13
`hasPointerCapture` The hasPointerCapture() method of the Element interface checks whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.	55	79	59	13	55	13
`lostpointercapture_event` The lostpointercapture event is fired when a captured pointer is released.	57	17	59	13	57	13
`pointercancel_event` The pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the Element/pointerdown_event event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.	55	12	59	13	55	13
`pointerdown_event` The pointerdown event is fired when a pointer becomes active. For mouse, it is fired when the device transitions from no buttons pressed to at least one button pressed. For touch, it is fired when physical contact is made with the digitizer. For pen, it is fired when the stylus makes physical contact with the digitizer.	55	12	59	13	55	13
`pointerenter_event` The pointerenter event fires when a pointing device is moved into the hit test boundaries of an element or one of its descendants, including as a result of a Element/pointerdownevent event from a device that does not support hover (see Element/pointerdownevent). Otherwise, pointerenter works the same as Element/mouseenterevent, and are dispatched at the…	55	12	59	13	55	13
`pointerleave_event` The pointerleave event is fired when a pointing device is moved out of the hit test boundaries of an element. For pen devices, this event is fired when the stylus leaves the hover range detectable by the digitizer. Otherwise, pointerleave works the same as Element/mouseleaveevent, and are dispatched at the same time. They are also dispatched at the same…	55	12	59	13	55	13
`pointermove_event` The pointermove event is fired when a pointer changes coordinates, and the pointer has not been canceled by a browser touch-action. It's very similar to the Element/mousemove_event event, but with more features.	55	12	59	13	55	13
`pointerout_event` The pointerout event is fired for several reasons including: pointing device is moved out of the hit test boundaries of an element; firing the Element/pointerupevent event for a device that does not support hover (see Element/pointerupevent); after firing the Element/pointercancelevent event (see Element/pointercancelevent); when a pen stylus leaves the…	55	12	59	13	55	13
`pointerover_event` The pointerover event is fired when a pointing device is moved into an element's hit test boundaries.	55	12	59	13	55	13
`pointerrawupdate_event` The pointerrawupdate event is fired when a pointer changes any properties that don't fire Element/pointerdownevent or Element/pointerupevent events. See Element/pointermove_event for a list of these properties.	77	79	148		77
`pointerup_event` The pointerup event is fired when a pointer is no longer active. Remember that it is possible to get a pointercancel event instead.	55	12	59	13	55	13
`releasePointerCapture` The releasePointerCapture() method of the Element interface releases (stops) pointer capture that was previously set for a specific (PointerEvent) pointer.	55	12	59	13	55	13
`setPointerCapture` The setPointerCapture() method of the Element interface is used to designate a specific element as the capture target of future pointer events. Subsequent events for the pointer will be targeted at the capture element until capture is released (via Element.releasePointerCapture() or the Element/pointerup_event event is fired).	55	12	59	13	55	13
`maxTouchPoints` The maxTouchPoints read-only property of the Navigator interface returns the maximum number of simultaneous touch contact points that are supported by the current device.	35	12	59	13	35	13
`altitudeAngle` The altitudeAngle read-only property of the PointerEvent interface represents the angle between a transducer (a pointer or stylus) axis and the X-Y plane of a device screen. The altitude angle describes whether the transducer is perpendicular to the screen, parallel, or at some angle in between.	86	86	131	18.2	86	18.2
`azimuthAngle` The azimuthAngle read-only property of the PointerEvent interface represents the angle between the Y-Z plane and the plane containing both the transducer (pointer or stylus) axis and the Y axis.	86	86	131	18.2	86	18.2
`getCoalescedEvents` The getCoalescedEvents() method of the PointerEvent interface returns a sequence of PointerEvent instances that were coalesced (merged) into a single Element/pointermoveevent or Element/pointerrawupdateevent event. Instead of a stream of many Element/pointermove_event events, user agents coalesce multiple updates into a single event. This helps with…	58	79	59	18.2	58	18.2
`getPredictedEvents` The getPredictedEvents() method of the PointerEvent interface returns a sequence of PointerEvent instances that are estimated future pointer positions. How the predicted positions are calculated depends on the user agent, but they are based on past points, current velocity, and trajectory.	77	79	89	18.2	77	18.2
`height` The height read-only property of the PointerEvent interface represents the height of the pointer's contact geometry, along the y-axis (in CSS pixels). Depending on the source of the pointer device (for example a finger), for a given pointer, each event may produce a different value.	55	12	59	13	55	13
`isPrimary` The isPrimary read-only property of the PointerEvent interface indicates whether or not the pointer device that created the event is the primary pointer. It returns true if the pointer that caused the event to be fired is the primary one and returns false otherwise.	55	12	59	13	55	13
`persistentDeviceId` The persistentDeviceId read-only property of the PointerEvent interface is a unique identifier for the pointing device generating the PointerEvent. This provides a secure, reliable way to identify multiple pointing devices (such as pens) interacting with the screen simultaneously.	128	128	141		128
`PointerEvent` The PointerEvent() constructor creates a new synthetic and untrusted PointerEvent object instance.	55	12	59	13	55	13
`PointerEvent (options altitudeAngle parameter)` `options.altitudeAngle` parameter	86	86	131	18.2	86	18.2
`PointerEvent (options azimuthAngle parameter)` `options.azimuthAngle` parameter	86	86	131	18.2	86	18.2
`pointerId` The pointerId read-only property of the PointerEvent interface is an identifier assigned to the pointer that triggered the event. The identifier is unique, being different from the identifiers of all other active pointer events.	55	12	59	13	55	13
`pointerType` The pointerType read-only property of the PointerEvent interface indicates the device type (mouse, pen, or touch) that caused a given pointer event.	55	12	59	13	55	13
`pointerType (fractional coordinates)` Fractional coordinates for `mouse`.	64	79	135	26.2	64	26.2
`pressure` The pressure read-only property of the PointerEvent interface indicates the normalized pressure of the pointer input.	55	12	59	13	55	13
`tangentialPressure` The tangentialPressure read-only property of the PointerEvent interface represents the normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress).	57	79	59	13	57	13
`tiltX` The tiltX read-only property of the PointerEvent interface is the angle (in degrees) between the Y-Z plane of the pointer and the screen. This property is typically only useful for a pen/stylus pointer type.	55	12	59	13	55	13
`tiltY` The tiltY read-only property of the PointerEvent interface is the angle (in degrees) between the X-Z plane of the pointer and the screen. This property is typically only useful for a pen/stylus pointer type.	55	12	59	13	55	13
`twist` The twist read-only property of the PointerEvent interface represents the clockwise rotation of the pointer (e.g., pen stylus) around its major axis, in degrees.	57	18	59	13	57	13
`width` The width read-only property of the PointerEvent interface represents the width of the pointer's contact geometry along the x-axis, measured in CSS pixels. Depending on the source of the pointer device (such as a finger), for a given pointer, each event may produce a different value.	55	12	59	13	55	13

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

const para = document.querySelector("p");

para.addEventListener("gotpointercapture", () => {
  console.log("I've been captured!");
});

para.addEventListener("pointerdown", (event) => {
  para.setPointerCapture(event.pointerId);
});

Use cases

Using Pointer Events

The gotpointercapture event is fired when an element captures a pointer using setPointerCapture().

Cautions

May not be supported in older browsers.

Implementation notes

Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Browser support

Syntax

Use cases

Using Pointer Events

Cautions

Implementation notes

Related links