JavaScript Element hasPointerCapture() Method

What You’ll Learn

Element.hasPointerCapture() is an instance method that returns true or false depending on whether this element currently holds pointer capture for a given pointerId. Learn the MDN pointerdown pattern with setPointerCapture() and releasePointerCapture(), drag-handler guards, and five try-it labs aligned with MDN.

Introduction

When a user presses a mouse button, touches a screen, or uses a pen, the browser fires Pointer Events with a unique pointerId. Normally, events target the element under the pointer. With setPointerCapture(pointerId), an element can keep receiving pointer events even when the pointer moves outside it — useful for dragging sliders, drawing pads, and custom controls.

hasPointerCapture(pointerId) lets you check whether your element currently owns that pointer. MDN: it returns whether the element has pointer capture for the pointer identified by the given pointer ID.

This page is part of JavaScript Element. Pair this method with setPointerCapture() and releasePointerCapture() on MDN.

Understanding the hasPointerCapture() Method

Calling el.hasPointerCapture(pointerId) asks: does this element currently hold capture for that pointer?

• It is an instance method on Element.
• Takes one parameter: pointerId from a PointerEvent (MDN).
• Returns true when this element has capture for that pointer.
• Returns false when it does not (or capture was released).
• Does not set or release capture — only checks state.
• Commonly used after setPointerCapture() or in drag handlers.
• Part of the Pointer Events API (Baseline since July 2020).

📝 Syntax

General form of Element.hasPointerCapture (MDN):

hasPointerCapture(pointerId)

Parameters

pointerId — The pointerId of a PointerEvent object (MDN).

Return value

A boolean: true if the element has pointer capture for that pointer, false if it does not (MDN).

Common patterns

// MDN example
const el = document.getElementById("target");
el.addEventListener("pointerdown", (ev) => {
  el.setPointerCapture(ev.pointerId);

  const pointerCap = el.hasPointerCapture(ev.pointerId);
  if (pointerCap) {
    // Still have pointer capture
  }
});

// Guard in pointermove (drag)
box.addEventListener("pointermove", (ev) => {
  if (!box.hasPointerCapture(ev.pointerId)) return;
  // handle drag
});

// After release
box.releasePointerCapture(ev.pointerId);
console.log(box.hasPointerCapture(ev.pointerId)); // false

Examples Gallery

Examples follow MDN Element.hasPointerCapture() patterns. Use View Output or Try It Yourself for each case.

const el = document.getElementById("target");

el.addEventListener("pointerdown", (ev) => {
  el.setPointerCapture(ev.pointerId);

  const pointerCap = el.hasPointerCapture(ev.pointerId);
  if (pointerCap) {
    console.log("capture active");
  } else {
    console.log("capture lost");
  }
});

capture active

const box = document.getElementById("box");

box.addEventListener("pointerdown", (ev) => {
  console.log(box.hasPointerCapture(ev.pointerId)); // false
  box.setPointerCapture(ev.pointerId);
  console.log(box.hasPointerCapture(ev.pointerId)); // true
});

false
true

const slider = document.getElementById("slider");

slider.addEventListener("pointerdown", (ev) => {
  slider.setPointerCapture(ev.pointerId);
  slider.releasePointerCapture(ev.pointerId);
  console.log(slider.hasPointerCapture(ev.pointerId)); // false
});

false

const box = document.getElementById("box");
const other = document.getElementById("other");

box.addEventListener("pointerdown", (ev) => {
  box.setPointerCapture(ev.pointerId);
  console.log(box.hasPointerCapture(ev.pointerId));   // true
  console.log(other.hasPointerCapture(ev.pointerId)); // false
});

true
false

const handle = document.getElementById("handle");

handle.addEventListener("pointerdown", (ev) => {
  handle.setPointerCapture(ev.pointerId);
});

handle.addEventListener("pointermove", (ev) => {
  if (!handle.hasPointerCapture(ev.pointerId)) return;
  console.log("dragging at", ev.clientX, ev.clientY);
});

dragging at 142 88

🚀 Common Use Cases

• Verifying capture after setPointerCapture() (MDN pattern).
• Guarding pointermove handlers during custom drag UIs.
• Confirming cleanup after releasePointerCapture().
• Custom sliders, knobs, and drawing pads with pointer events.
• Debugging which element owns a pointer during interaction.
• Defensive checks before updating UI state on pointerup.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2020).
• Requires a valid pointerId from a PointerEvent (MDN).
• Only checks state — use setPointerCapture() to request capture.
• Returns false on elements that never captured that pointer.
• Capture may end on pointerup, pointercancel, or releasePointerCapture().
• Related: hasAttributes(), getBoundingClientRect(), setPointerCapture(), JavaScript hub.

💡 Best Practices