Element: releasePointerCapture() method
目录
- Syntax
- Parameters
- Return value
- Exceptions
- Examples
- HTML
- CSS
- JavaScript
- Result
- Specifications
- Browser compatibility
- See also
The releasePointerCapture() method of the
Element interface releases (stops) pointer capture that was
previously set for a specific (PointerEvent) pointer.
Syntax
releasePointerCapture(pointerId)
Parameters
pointerId- : The pointerId of a PointerEvent object.
Return value
None (undefined).
Exceptions
NotFoundErrorDOMException- : Thrown if
pointerIddoes not match any active pointer.
- : Thrown if
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;
}
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;