JavaScript Element pointerleave Event

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

Definition

In JavaScript, the pointerleave event fires when a pointer moves out of an element’s hit test boundaries (MDN). For pen, it also fires when the stylus leaves the digitizer’s detectable hover range.

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

Syntax

Listen for pointerleave. Start with this line.

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

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

Library declarations
JavaScript
addEventListener("pointerleave", fn)

Parameters

ParameterDescription
Event nameRequired. "pointerleave"
Handler propOptional. onpointerleave
PointerEventRequired. pointerId, pointerType, …

Return Value

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

JavaScript Examples

Example 1 — Log pointerleave (MDN)

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

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

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

How It Works

  1. Listen on an element that should react when exited.
  2. Handler runs when the pointer leaves 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 — onpointerleave Property (MDN)

Same idea using the event handler property.

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

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

How It Works

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

Example 3 — pointerleave vs pointerout

Count how often each fires when moving onto a child, then leaving.

JavaScript
const card = document.getElementById("card");
let leaveCount = 0;
let outCount = 0;

card.addEventListener("pointerleave", () => {
  leaveCount += 1;
  console.log("leave", leaveCount, "out", outCount);
});

card.addEventListener("pointerout", () => {
  outCount += 1;
  console.log("leave", leaveCount, "out", outCount);
});
Try It Yourself

How It Works

  1. Move onto a child — only pointerout increases.
  2. Leave the card entirely — both counts increase.
  3. pointerleave waits until you exit the whole tree.
  4. Use leave for hover clear; use out when every hop matters.
Compatibility

Browser Support

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

✓ Baseline · Widely available

pointerleave

Fires when a pointer leaves 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
pointerleave Excellent

Bottom line: Prefer pointerleave for one leave signal per visit. See the MDN pointerleave reference.

Frequently Asked Questions

MDN: it fires when a pointing device moves out of an element’s hit test boundaries. For pen, it also fires when the stylus leaves the digitizer’s detectable hover range.
No. MDN marks Element pointerleave 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.
pointerleave does not bubble and is not sent again when the pointer moves between the element and its descendants. pointerout bubbles and fires when moving among descendants.
MDN: otherwise pointerleave works the same as mouseleave and they are dispatched at the same time (along with mouseout / pointerout when appropriate).
MDN (pointerdown): on touchscreens with direct manipulation, implicit pointer capture can suppress pointerover / pointerenter / pointerleave / pointerout until release or releasePointerCapture.

Next: pointermove

Continue with the Element pointermove event.

pointermove →

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 pointerenter Event JavaScript Element pointermove Event