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.
Thuộc tính releasePointerCapture() method of the
Element interface releases (stops) pointer capture that was
previously set for a specific (PointerEvent) pointer.
Cú pháp
js
releasePointerCapture(pointerId)
Tham số
pointerId-
The
pointerIdof aPointerEventobject.
Giá trị trả về
None (undefined).
Ngoại lệ
NotFoundErrorDOMException-
Thrown if
pointerIddoes not match any active pointer.
Ví dụ
Ví dụ này 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
Đặc tả kỹ thuật
| Specification |
|---|
| Pointer Events # dom-element-releasepointercapture |