JavaScript Element gotpointercapture Event

What You’ll Learn

The gotpointercapture event fires when an element captures a pointer with setPointerCapture(). Learn addEventListener vs ongotpointercapture, pointerId, the lostpointercapture pair, drag capture patterns, and five try-it labs.

Introduction

Pointer capture lets an element keep receiving events for a specific pointer even when the pointer leaves that element’s hit area—perfect for sliders, drag handles, and canvas drawing.

When you call setPointerCapture(pointerId) and capture succeeds, the browser fires gotpointercapture on the capturing element. Pair it with lostpointercapture to know when capture ends.

Understanding gotpointercapture

An instance event that answers: “Did this element just become the capture target for a pointer?”

• Fires after a successful setPointerCapture(pointerId).
• PointerEvent — includes pointerId, pointerType, and more.
• Handler — ongotpointercapture or addEventListener("gotpointercapture", ...).
• Pair — lostpointercapture when capture is released.
• Related APIs — setPointerCapture, releasePointerCapture, hasPointerCapture.
• Baseline Widely available on MDN.

📝 Syntax

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

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

ongotpointercapture = (event) => { };

Event type

A PointerEvent (inherits from MouseEvent and Event).

Handy properties

🔁 Capture Lifecycle

A typical drag / slider flow looks like this:

1. pointerdown on the element (pointer is active)
2. setPointerCapture(pointerId) on the element
3. gotpointercapture fires on the capturing element
4. pointermove events keep targeting the capturer (even outside bounds)
5. pointerup / releasePointerCapture() → lostpointercapture

So gotpointercapture is the “capture started” confirmation; lostpointercapture is the matching end signal.

⚖️ Capture APIs at a glance

Examples Gallery

Examples follow MDN Element: gotpointercapture event. Press and hold on the stage elements to trigger capture.

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

para.addEventListener("gotpointercapture", () => {
  out.textContent = "I've been captured!";
});

para.addEventListener("pointerdown", (event) => {
  para.setPointerCapture(event.pointerId);
});

I've been captured!

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

para.ongotpointercapture = () => {
  out.textContent = "I've been captured!";
};

para.addEventListener("pointerdown", (event) => {
  para.setPointerCapture(event.pointerId);
});

I've been captured!

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

stage.addEventListener("gotpointercapture", (event) => {
  out.textContent =
    "captured id=" + event.pointerId +
    " type=" + event.pointerType;
});

stage.addEventListener("pointerdown", (event) => {
  stage.setPointerCapture(event.pointerId);
});

captured id=1 type=mouse

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

handle.addEventListener("gotpointercapture", () => {
  out.textContent = "dragging…";
  handle.classList.add("is-captured");
});

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

handle.addEventListener("pointermove", (event) => {
  if (!handle.hasPointerCapture(event.pointerId)) return;
  handle.style.transform = "translateX(" + (event.clientX - 40) + "px)";
});

handle.addEventListener("pointerup", (event) => {
  if (handle.hasPointerCapture(event.pointerId)) {
    handle.releasePointerCapture(event.pointerId);
  }
});

dragging…

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

stage.addEventListener("gotpointercapture", (event) => {
  out.textContent = "GOT capture id=" + event.pointerId;
});

stage.addEventListener("lostpointercapture", (event) => {
  out.textContent = "LOST capture id=" + event.pointerId;
});

stage.addEventListener("pointerdown", (event) => {
  stage.setPointerCapture(event.pointerId);
});

stage.addEventListener("pointerup", (event) => {
  if (stage.hasPointerCapture(event.pointerId)) {
    stage.releasePointerCapture(event.pointerId);
  }
});

GOT capture id=1
LOST capture id=1

🚀 Common Use Cases

• Confirm a drag session started (show “dragging” UI).
• Sliders and scrubbers that must track outside their bounds.
• Canvas / drawing tools that follow the pointer until lift.
• Custom window / panel resize handles.
• Debugging capture with pointerId logs.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available — no Deprecated / Experimental / Non-standard banner.
• Capture needs an active pointer (button down / touch contact) for setPointerCapture to take effect.
• Use touch-action: none on drag surfaces to reduce browser gesture interference.
• If you move the element in the DOM, call setPointerCapture after the move so capture stays attached.
• Related learning: gesturestart, input, setPointerCapture(), addEventListener(), JavaScript hub.

💡 Best Practices