In JavaScript, the pointerover event fires when a pointing device moves into an element’s hit-test boundaries (MDN). It is a bubbling PointerEvent — the enter twin of pointerout, and similar to mouseover.
Register a listener with addEventListener. Check readiness and browser support before you rely on this event.
Syntax
Listen for pointerover. Start with this line.
JavaScript
el.addEventListener("pointerover", fn)
Call
What it does
el.addEventListener("pointerover", fn)
Primary signature.
Built into the browser. Listen with el.addEventListener("pointerover", …) — no import required.
Library declarations
JavaScript
el.addEventListener("pointerover", fn)
Parameters
Parameter
Description
Event target
Required. Element listening for enter
PointerEvent
Required. Type, coords, relatedTarget
Return Value
Return Value
Description
*
Fires as an Element event (listener receives the Event object).
JavaScript Examples
Example 1 — Listen for pointerover
MDN-style listener — log when the pointer moves into the element.
JavaScript
const para = document.querySelector("p");
para.addEventListener("pointerover", (event) => {
console.log("Pointer moved in");
});
Listen for enter.pointerover provides a PointerEvent.
Read relatedTarget. The element the pointer left (may be null).
Log a label. Use id or tagName for a simple message.
Use carefully. Child crossings also change relatedTarget.
Example 3 — Prefer pointerenter for Whole-Box Enter
Show hover once when entering the element from outside its children.
JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");
// Usually better than pointerover for whole-component enter (MDN)
box.addEventListener("pointerenter", () => {
out.textContent = "entered the whole box";
});
Choose pointerenter. MDN recommends it over pointerover for sensible whole-element enter.
Ignore child crossings. Moving parent → child does not re-fire enter.
No bubbling. Enter fires on the element itself when first entered from outside.
Keep pointerover when you need bubbling or per-child enter signals.
Compatibility
Browser Support
Elementpointerover is Baseline Widely available on MDN (since July 2020). Pointer Events work across modern evergreen browsers.
✓ Baseline · Widely available
Element pointerover
PointerEvent when a pointer enters an element — bubbles; watch child crossings.
96%Modern browser support
Google ChromeAll versions · Desktop & Mobile
Full support
Mozilla FirefoxAll versions · Desktop & Mobile
Full support
Apple SafariAll versions · macOS & iOS
Full support
Microsoft EdgeAll versions · Chromium & Legacy
Full support
Internet ExplorerIE 6+ · Legacy environments
Full support
OperaAll modern versions
Full support
pointeroverExcellent
Bottom line: Safe for modern web apps. For whole-component hover enter, prefer pointerenter. Use pointerover when you need bubbling or per-child enter signals.
Frequently Asked Questions
It fires when a pointing device moves into an element’s hit-test boundaries (MDN). It is a bubbling PointerEvent — the enter twin of pointerout.
No. MDN marks Element pointerover as Baseline Widely available (since July 2020). It is not Deprecated, Experimental, or Non-standard.
A PointerEvent. Useful fields include pointerId, pointerType, relatedTarget, clientX, and clientY.
pointerover bubbles and also fires when moving from a parent into a child (or among child boundaries). pointerenter does not bubble and fires only when entering the element from outside its descendants.
For whole-component hover enter without descendant noise, MDN notes pointerenter / pointerleave are usually more sensible than pointerover / pointerout.
When you want bubbling/delegation, or when you care about entering individual children (for example highlighting each list item as the pointer enters it).
