JavaScript Element pointerleave Event

What You’ll Learn

The pointerleave event fires when a pointer leaves an element’s hit-test area. Learn addEventListener vs onpointerleave, how it mirrors mouseleave, why it differs from pointerout, the pointerenter pair, and five try-it labs.

Introduction

pointerleave answers: “Did a pointer just leave this element (and all descendants)?” It is the Pointer Events twin of mouseleave—unified for mouse, touch, and pen.

MDN notes that otherwise it works the same as mouseleave, and both are dispatched at the same time (with mouseout / pointerout when appropriate). Prefer the enter/leave pair for whole-component hover without descendant noise.

Understanding pointerleave

An instance event that answers: “Did the pointer leave this element tree?”

• Hit test — fires when the pointer exits the element and all descendants.
• Does not bubble — like mouseleave / unlike pointerout.
• No descendant re-fire — moving among children does not fire leave on the parent.
• Twin of mouseleave — dispatched together when mouse compatibility events apply.
• Baseline Widely available on MDN (since July 2020).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("pointerleave", (event) => { });

onpointerleave = (event) => { };

Event type

A PointerEvent (inherits from MouseEvent and Event).

Handy properties

⚖️ pointerleave vs pointerout

For most UI hover enter/exit, prefer pointerenter / pointerleave (or mouseenter / mouseleave) over the bubbling over/out pair.

🤳 Implicit Capture & Touch

On touchscreen browsers that allow direct manipulation, pointerdown can trigger implicit pointer capture. While capture is set, boundary events may be suppressed:

• pointerover, pointerenter, pointerleave, and pointerout may not fire as expected.
• Capture ends on pointerup / pointercancel, or when you call releasePointerCapture().
• That is why a touch drag across neighbors may not look like mouse hover enter/leave.

Examples Gallery

Examples follow MDN Element: pointerleave event. Move a mouse or pen onto the stage, then leave it (or lift after a touch).

const para = document.querySelector("p");
const out = document.getElementById("out");

para.addEventListener("pointerleave", (event) => {
  out.textContent = "Pointer left element";
});

Pointer left element

const para = document.querySelector("p");
const out = document.getElementById("out");

para.onpointerleave = (event) => {
  out.textContent = "onpointerleave at " + event.clientX + "," + event.clientY;
};

onpointerleave at 120,18

const parent = document.getElementById("parent");
const out = document.getElementById("out");
let leaveCount = 0;
let outCount = 0;

parent.addEventListener("pointerleave", () => {
  leaveCount++;
  render();
});

parent.addEventListener("pointerout", () => {
  outCount++;
  render();
});

function render() {
  out.textContent =
    "pointerleave=" + leaveCount + " pointerout=" + outCount;
}

pointerleave=1 pointerout=4

const card = document.getElementById("card");
const tip = document.getElementById("tip");

card.addEventListener("pointerenter", () => {
  tip.hidden = false;
  tip.textContent = "Preview details…";
});

card.addEventListener("pointerleave", () => {
  tip.hidden = true;
});

(tip hidden)

const stage = document.getElementById("stage");
const out = document.getElementById("out");

stage.addEventListener("pointerleave", (event) => {
  out.textContent =
    "leave id=" + event.pointerId +
    " type=" + event.pointerType +
    " primary=" + event.isPrimary;
});

leave id=1 type=mouse primary=true

🚀 Common Use Cases

• Whole-component hover exit for mouse, pen, and (where applicable) touch.
• Hide previews, highlights, or tooltips without descendant flicker.
• Pair with pointerenter instead of bubbling pointerover / pointerout.
• Clear temporary UI state when the stylus leaves digitizer hover range.
• Teach Pointer Events enter/leave vs the mouseenter/mouseleave twins.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2020) — no Deprecated / Experimental / Non-standard banner.
• Does not bubble; pair with pointerenter for whole-component hover.
• Dispatched with mouseleave when mouse compatibility events apply.
• Implicit touch capture after pointerdown can suppress enter/leave until release.
• Related learning: pointerenter, pointermove, mouseleave, addEventListener(), JavaScript hub.

💡 Best Practices