Element: pointerout 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.
The pointerout event is fired for several reasons including: pointing device is moved out of the hit test boundaries of an element; firing the pointerup event for a device that does not support hover (see pointerup); after firing the pointercancel event (see pointercancel); when a pen stylus leaves the hover range detectable by the digitizer.
pointerout events have the same problems as mouseout. If the target element has child elements, pointerout and pointerover events fire as the pointer moves over the boundaries of these elements too, not just the target element itself. Usually, pointerenter and pointerleave events' behavior is more sensible, because they are not affected by moving into child elements.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("pointerout", (event) => { })
onpointerout = (event) => { }
Event type
A PointerEvent. Inherits from Event.
Examples
Using addEventListener():
const para = document.querySelector("p");
para.addEventListener("pointerout", (event) => {
console.log("Pointer moved out");
});
Using the onpointerout event handler property:
const para = document.querySelector("p");
para.onpointerout = (event) => {
console.log("Pointer moved out");
};
Specifications
| Specification |
|---|
| Pointer Events # the-pointerout-event |
| Pointer Events # dom-globaleventhandlers-onpointerout |