JavaScript Element pointerenter Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word POINTERENTER

Definition

In JavaScript, the pointerenter event fires when a pointer moves into an element’s hit test boundaries (or a descendant’s) — MDN. That includes contact from pointerdown on devices that do not support hover.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for pointerenter. Start with this line.

JavaScript
addEventListener("pointerenter", fn)
CallWhat it does
addEventListener("pointerenter", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("pointerenter", …) — no import required.

Library declarations
JavaScript
addEventListener("pointerenter", fn)

Parameters

ParameterDescription
Event nameRequired. "pointerenter"
Handler propOptional. onpointerenter
PointerEventRequired. pointerId, pointerType, …

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Log pointerenter (MDN)

MDN’s basic listener when a pointer enters an element.

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

para.addEventListener("pointerenter", (event) => {
  console.log("Pointer entered element", event.pointerType);
});
Try It Yourself

How It Works

  1. Listen on an element that should react when entered.
  2. Handler runs when the pointer crosses into its hit test (MDN).
  3. Read pointerType to know mouse vs touch vs pen.
  4. Does not re-fire for moves among descendants.

Example 2 — onpointerenter Property (MDN)

Same idea using the event handler property.

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

para.onpointerenter = (event) => {
  console.log("Pointer entered element");
};
Try It Yourself

How It Works

  1. Assign onpointerenter — MDN supports the handler property.
  2. Same event as addEventListener("pointerenter", …).
  3. Later assignment replaces the previous on* handler.
  4. Prefer addEventListener when you need multiple handlers.

Example 3 — pointerenter vs pointerover

Count how often each fires when moving into a child.

JavaScript
const card = document.getElementById("card");
let enterCount = 0;
let overCount = 0;

card.addEventListener("pointerenter", () => {
  enterCount += 1;
  console.log("enter", enterCount, "over", overCount);
});

card.addEventListener("pointerover", () => {
  overCount += 1;
  console.log("enter", enterCount, "over", overCount);
});
Try It Yourself

How It Works

  1. Enter the card — both counts go to 1.
  2. Move onto a child — only pointerover increases.
  3. pointerenter stays put while you remain inside the card tree.
  4. Use enter for hover UI; use over when every descendant hop matters.
Compatibility

Browser Support

Element pointerenter is Baseline Widely available (MDN: since July 2020). Safe for modern evergreen browsers.

✓ Baseline · Widely available

pointerenter

Fires when a pointer enters an element’s hit test — unified mouse, touch, and pen.

99% Widely available
Google Chrome Yes
Yes
Microsoft Edge Yes
Yes
Mozilla Firefox Yes
Yes
Apple Safari Yes
Yes
Opera Yes
Yes
Internet Explorer IE11 (Pointer Events)
Partial
pointerenter Excellent

Bottom line: Prefer pointerenter for one enter signal per visit. See the MDN pointerenter reference.

Frequently Asked Questions

MDN: it fires when a pointing device moves into the hit test boundaries of an element or one of its descendants — including from pointerdown on devices that do not support hover.
No. MDN marks Element pointerenter as Baseline Widely available (since July 2020). It is not Deprecated, Experimental, or Non-standard.
A PointerEvent. Useful fields include pointerId, pointerType, isPrimary, clientX, and clientY.
pointerenter does not bubble and is not sent again when the pointer moves between the element and its descendants. pointerover bubbles and fires when moving among descendants.
MDN: otherwise pointerenter works the same as mouseenter and they are dispatched at the same time (along with mouseover / pointerover when appropriate).
MDN (pointerdown): on touchscreens with direct manipulation, implicit pointer capture can suppress pointerover / pointerenter / pointerleave / pointerout until release or releasePointerCapture.

Next: pointerleave

Continue with the Element pointerleave event.

pointerleave →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

14 people found this page helpful

JavaScript Element pointerdown Event JavaScript Element pointerleave Event