Element: releasePointerCapture() 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 releasePointerCapture() method of the Element interface releases (stops) pointer capture that was previously set for a specific (PointerEvent) pointer.
Syntax
js
releasePointerCapture(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
html
<div id="slider">SLIDE ME</div> CSS
css
div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #ffbbee; } JavaScript
js
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-releasepointercapture |