Element: 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 pointerdown event from a device that does not support hover (see pointerdown).
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("pointerenter", (event) => {});
onpointerenter = (event) => {};
Event type
A PointerEvent. Inherits from Event.
Event properties
This interface inherits properties from MouseEvent and Event.
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 range
0to1, where0and1represent 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 or cylinder stress) in the range
-1to1, where0is the neutral position of the control. PointerEvent.tiltXRead only-
The plane angle (in degrees, in the range of
-90to90) 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
-90to90) 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 range
0to359. 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
Using addEventListener():
js
const para = document.querySelector("p");
para.addEventListener("pointerenter", (event) => {
console.log("Pointer entered element");
});
Using the onpointerenter event handler property:
js
const para = document.querySelector("p");
para.onpointerenter = (event) => {
console.log("Pointer entered element");
};
Specifications
| Specification |
|---|
| Pointer Events # the-pointerenter-event |
| Pointer Events # dom-globaleventhandlers-onpointerenter |
Browser compatibility
BCD tables only load in the browser