Call Element.setCapture() during a mousedown handler to retarget mouse events to that element until the button is released or document.releaseCapture() runs (MDN). Prefer modern setPointerCapture().
Pass the required arguments shown below. Check return values and browser support before you rely on the result.
Call el.setCapture. Start with this line.
el.setCapture(retargetToElement?)| Call | What it does |
|---|---|
el.setCapture(retargetToElement?) | Primary signature. |
el.setCapture(...) | Call with the arguments your case needs. |
Built into the browser. Call setCapture(...) on an Element — no import required.
el.setCapture(retargetToElement?)| Parameter | Description |
|---|---|
| retargetToElement | Optional. true = this element only; false = include descendants |
| Call site | Required. During mousedown handling (MDN) |
| Return Value | Description |
|---|---|
| * | Always undefined |
MDN-style check before touching the legacy API.
const btn = document.getElementById("myButton");
if (typeof btn.setCapture === "function") {
console.log("Legacy setCapture is present");
} else {
console.log("Use setPointerCapture instead");
}setCapture.MDN Gecko pattern — for understanding old code only.
function mouseDown(e) {
if (typeof e.target.setCapture !== "function") return;
e.target.setCapture();
e.target.addEventListener("mousemove", mouseMoved);
}
function mouseUp(e) {
e.target.removeEventListener("mousemove", mouseMoved);
}
function mouseMoved(e) {
console.log(e.clientX, e.clientY);
}
const btn = document.getElementById("myButton");
btn.addEventListener("mousedown", mouseDown);
btn.addEventListener("mouseup", mouseUp);setPointerCaptureMDN’s recommended replacement from the Pointer Events API.
const btn = document.getElementById("myButton");
btn.addEventListener("pointerdown", (e) => {
btn.setPointerCapture(e.pointerId);
});
btn.addEventListener("pointermove", (e) => {
if (!btn.hasPointerCapture(e.pointerId)) return;
console.log(e.clientX, e.clientY);
});
btn.addEventListener("pointerup", (e) => {
if (btn.hasPointerCapture(e.pointerId)) {
btn.releasePointerCapture(e.pointerId);
}
});setCapture.Element.setCapture() is Deprecated and Non-standard on MDN — not part of any specification, and never had broad cross-browser support. Prefer setPointerCapture().
Legacy Gecko mouse capture during mousedown. Use Pointer Events setPointerCapture() for new code.
Bottom line: Do not ship setCapture() in production. Feature-detect only for legacy maintenance; migrate to setPointerCapture().
Learn the modern Pointer Events capture API for drag and tracking UIs.
11 people found this page helpful