Element: releasePointerCapture() Methode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2020.
Die releasePointerCapture() Methode der
Element Schnittstelle gibt die Pointer-Erfassung frei (stoppt sie), die zuvor für einen bestimmten (PointerEvent) Pointer gesetzt wurde.
Syntax
js
releasePointerCapture(pointerId)
Parameter
pointerId-
Die
pointerIdeinesPointerEventObjekts.
Rückgabewert
Keiner (undefined).
Ausnahmen
NotFoundErrorDOMException-
Wird ausgelöst, wenn
pointerIdkeinem aktiven Pointer entspricht.
Beispiele
Dieses Beispiel setzt die Pointer-Erfassung auf einem <div>, wenn Sie darauf drücken. So können Sie das Element horizontal verschieben, selbst wenn Ihr Pointer seine Grenzen überschreitet.
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
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;
Ergebnis
Spezifikationen
| Specification |
|---|
| Pointer Events # dom-element-releasepointercapture |
Browser-Kompatibilität
Loading…