Element: setPointerCapture() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
The setPointerCapture()
method of the
Element
interface is used to designate a specific element as the
capture target of future pointer events. Subsequent events for the pointer will
be targeted at the capture element until capture is released (via
Element.releasePointerCapture()
or the
pointerup
event is fired).
See pointer events for an overview and examples of how pointer capture works.
Syntax
setPointerCapture(pointerId)
Parameters
pointerId
-
The
pointerId
of aPointerEvent
object.
Return value
None (undefined
).
Exceptions
NotFoundError
DOMException
-
Thrown if
pointerId
does not match any active pointer.
Examples
This example sets pointer capture on a HTML
CSS
div {
width: 140px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #fbe;
touch-action: none;
}
JavaScript
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)`;
}
const slider = document.getElementById("slider");
slider.onpointerdown = beginSliding;
slider.onpointerup = stopSliding;
Result
Specifications
Specification Pointer Events
# dom-element-setpointercaptureBrowser compatibility
See also