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⁩.

ThesetPointerCapture() method of theElement interface is used to designate a specific element as thecapture target of future pointer events. Subsequent events for the pointer willbe targeted at the capture element until capture is released (viaElement.releasePointerCapture() or thepointerup event is fired).

Seepointer events for an overview and examples of how pointer capture works.

Syntax

setPointerCapture(pointerId)

Parameters

pointerId: ThepointerId of aPointerEvent object.

Return value

None (undefined).

Exceptions

NotFoundErrorDOMException: Thrown ifpointerId does not match any active pointer.

Examples

This example sets pointer capture on a<div> when you press down onit. This lets you slide the element horizontally, even when your pointer moves outside ofits boundaries.

HTML

html

<div>SLIDE ME</div>

CSS

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;