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
pointerIdof aPointerEventobject.
Return value
None (undefined).
Exceptions
NotFoundErrorDOMException-
Thrown if
pointerIddoes not match any active pointer.
Examples
This example sets pointer capture on a <div> when you press down on
it. This lets you slide the element horizontally, even when your pointer moves outside of
its boundaries.
HTML
<div id="slider">SLIDE ME</div>
CSS
div {
width: 140px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #ffbbee;
touch-action: none;
}
JavaScript
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;
Result
Specifications
| Specification |
|---|
| Pointer Events # dom-element-setpointercapture |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
setPointerCapture
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.