Element: setPointerCapture() 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 setPointerCapture() Methode der Element-Schnittstelle wird verwendet, um ein bestimmtes Element als Capture-Ziel für zukünftige Pointer-Ereignisse festzulegen. Nachfolgende Ereignisse für den Pointer werden auf das Capture-Element gerichtet, bis das Capture freigegeben wird (über Element.releasePointerCapture() oder das pointerup Ereignis ausgelöst wird).
Siehe Pointer-Ereignisse für einen Überblick und Beispiele, wie Pointer-Capture funktioniert.
Syntax
setPointerCapture(pointerId)
Parameter
pointerId-
Die
pointerIdeinesPointerEvent-Objekts.
Rückgabewert
Keiner (undefined).
Ausnahmen
NotFoundErrorDOMException-
Wird ausgelöst, wenn
pointerIdkeinem aktiven Pointer entspricht.
Beispiele
Dieses Beispiel setzt Pointer-Capture auf ein <div>, wenn darauf gedrückt wird. Dadurch können Sie das Element horizontal verschieben, selbst wenn Ihr Pointer sich außerhalb seiner Grenzen bewegt.
HTML
<div id="slider">SLIDE ME</div>
CSS
div {
width: 140px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #ffbbee;
touch-action: none;
}
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;
Ergebnis
Spezifikationen
| Specification |
|---|
| Pointer Events # dom-element-setpointercapture |
Browser-Kompatibilität
Loading…