JavaScript Element setPointerCapture() Method

What You’ll Learn

Element.setPointerCapture() is an instance method that requests pointer capture for a given pointerId. Learn MDN’s horizontal slider demo, why capture keeps events flowing when the pointer leaves an element, how to pair with releasePointerCapture() and hasPointerCapture(), and five try-it labs aligned with MDN.

Introduction

Custom sliders, drag handles, and drawing tools need pointer events even when the user moves the mouse, finger, or pen outside the element. Without pointer capture, pointermove and pointerup may stop firing on your control once the pointer leaves its bounds.

element.setPointerCapture(pointerId) tells the browser: send all future events for this pointer to this element until capture is released (MDN). Call it on pointerdown, then call releasePointerCapture(pointerId) on pointerup or pointercancel.

This page is part of JavaScript Element. Prefer this over the deprecated setCapture() API for modern drag workflows.

Understanding the setPointerCapture() Method

Calling el.setPointerCapture(pointerId) designates this element as the capture target for that pointer (MDN).

• It is an instance method on Element.
• Takes one parameter: pointerId from a PointerEvent (MDN).
• Returns undefined.
• Throws NotFoundError if pointerId does not match any active pointer (MDN).
• Capture ends automatically on pointerup, or call releasePointerCapture() explicitly.
• Works with mouse, touch, and pen via the Pointer Events API.
• Part of the Pointer Events specification (Baseline since July 2020).

📝 Syntax

General form of Element.setPointerCapture (MDN):

setPointerCapture(pointerId)

Parameters

Return value

undefined (MDN).

Exceptions

NotFoundError — Thrown if pointerId does not match any active pointer (MDN).

Common patterns

// MDN horizontal slider
const slider = document.getElementById("slider");

function beginSliding(e) {
  slider.onpointermove = slide;
  slider.setPointerCapture(e.pointerId);
}

function stopSliding(e) {
  slider.onpointermove = null;
  slider.releasePointerCapture(e.pointerId);
}

function slide(e) {
  slider.style.transform = `translate(${e.clientX - 70}px)`;
}

slider.onpointerdown = beginSliding;
slider.onpointerup = stopSliding;

Examples Gallery

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

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

function beginSliding(e) {
  slider.onpointermove = slide;
  slider.setPointerCapture(e.pointerId);
}

function stopSliding(e) {
  slider.onpointermove = null;
  slider.releasePointerCapture(e.pointerId);
}

function slide(e) {
  slider.style.transform = `translate(${e.clientX - 70}px)`;
}

slider.onpointerdown = beginSliding;
slider.onpointerup = stopSliding;

Slider slides horizontally even when pointer leaves the element.

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

box.addEventListener("pointerdown", (ev) => {
  box.setPointerCapture(ev.pointerId);
  console.log("capture requested for pointer", ev.pointerId);
});

box.addEventListener("pointerup", (ev) => {
  box.releasePointerCapture(ev.pointerId);
  console.log("capture released");
});

capture requested for pointer 1
capture released

const handle = document.getElementById("handle");
let offsetX = 0;

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

handle.addEventListener("pointermove", (ev) => {
  if (!handle.hasPointerCapture(ev.pointerId)) return;
  handle.style.left = (ev.clientX - offsetX) + "px";
});

handle.addEventListener("pointerup", (ev) => {
  handle.releasePointerCapture(ev.pointerId);
});

Handle keeps moving while pointer is outside the element.

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

knob.addEventListener("pointerdown", (ev) => {
  knob.setPointerCapture(ev.pointerId);
  console.log("has capture:", knob.hasPointerCapture(ev.pointerId)); // true
});

has capture: true

#slider {
  touch-action: none; /* prevent browser scroll while dragging */
}

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

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

slider.addEventListener("pointerup", (ev) => {
  slider.releasePointerCapture(ev.pointerId);
});

Smooth touch drag without page scroll (MDN CSS pattern).

🚀 Common Use Cases

• Horizontal and vertical sliders (MDN demo).
• Custom drag handles that must track outside element bounds.
• Drawing pads and signature capture UIs.
• Resizable panels and split views.
• Replacing deprecated setCapture() in legacy drag code (MDN).
• Touch-friendly controls with touch-action: none (MDN).

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2020).
• Requires a valid pointerId from an active PointerEvent (MDN).
• Throws NotFoundError if pointerId does not match any active pointer.
• Always pair with releasePointerCapture() on pointerup or pointercancel.
• Use touch-action: none on draggable elements for touch sliders (MDN).
• Related: hasPointerCapture(), releasePointerCapture(), setCapture() (deprecated), JavaScript hub.

💡 Best Practices