Element: releasePointerCapture() method
The releasePointerCapture()
method of the
Element
interface releases (stops) pointer capture that was
previously set for a specific (PointerEvent
) pointer.
See the Element.setPointerCapture()
method
for a description of pointer capture and how to set it for a particular
element.
Syntax
js
releasePointerCapture(pointerId)
Parameters
pointerId
-
The
pointerId
of aPointerEvent
object.
Return value
None (undefined
).
Exceptions
Exception | Explanation |
---|---|
InvalidPointerId |
pointerId does not match any of the active pointers. |
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: #fbe;
}
JavaScript
js
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-releasepointercapture |
Browser compatibility
BCD tables only load in the browser