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 July 2020.
Die setPointerCapture()
-Methode des Element
-Interfaces wird verwendet, um ein bestimmtes Element als Erfassungsziel zukünftiger Zeigerereignisse festzulegen. Nachfolgende Ereignisse für den Zeiger werden auf das Erfassungselement gerichtet, bis die Erfassung beendet wird (entweder durch Element.releasePointerCapture()
oder nachdem das pointerup
-Ereignis ausgelöst wurde).
Siehe Zeigerereignisse für einen Überblick und Beispiele, wie Zeigererfassung funktioniert.
Syntax
setPointerCapture(pointerId)
Parameter
pointerId
-
Die
pointerId
einesPointerEvent
-Objekts.
Rückgabewert
Keiner (undefined
).
Ausnahmen
NotFoundError
DOMException
-
Wird ausgelöst, wenn
pointerId
keinem aktiven Zeiger entspricht.
Beispiele
Dieses Beispiel setzt die Zeigererfassung auf einem <div>
, wenn Sie darauf drücken. Dadurch können Sie das Element horizontal verschieben, selbst wenn der Zeiger 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: #fbe;
}
JavaScript
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-setpointercapture |
Browser-Kompatibilität
BCD tables only load in the browser