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

js
setPointerCapture(pointerId)

Parameter

pointerId

Die pointerId eines PointerEvent-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

html
<div id="slider">SLIDE ME</div>

CSS

css
div {
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbe;
}

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-setpointercapture

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch