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 |