PointerEvent: persistentDeviceId-Eigenschaft

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Die schreibgeschützte Eigenschaft persistentDeviceId der PointerEvent-Schnittstelle ist eine eindeutige Kennung für das Zeigegerät, das das PointerEvent erzeugt. Dies bietet eine sichere und zuverlässige Möglichkeit, mehrere Zeigegeräte (wie Stifte) zu identifizieren, die gleichzeitig mit dem Bildschirm interagieren.

Eine persistentDeviceId bleibt für die Dauer einer Browsingsitzung bestehen. Um das Risiko des Fingerprintings/Trackings zu vermeiden, werden Zeigegeräten zu Beginn jeder Sitzung neue persistentDeviceId-Werte zugewiesen.

Zeigerereignisse, deren erzeugendes Gerät nicht identifiziert werden konnte, erhalten einen persistentDeviceId-Wert von 0.

Wert

Ein Integer oder 0, wenn das Gerät, das das PointerEvent erzeugt, nicht identifiziert werden konnte.

Hinweis: Aufgrund von Beschränkungen im digitalen und Zeigegeräte-Hardwarebereich kann es vorkommen, dass eine persistentDeviceId für alle Zeigerereignisse nicht verfügbar ist, insbesondere bei älterer Hardware. Beispielsweise könnte das Zeigegerät seine Hardware-ID dem Digitalisierer nicht rechtzeitig melden, damit pointerdown eine persistentDeviceId erhält: Diese kann zunächst 0 sein und sich für spätere Ereignisse in der Zeichenfolge in einen gültigen Wert ändern.

Beispiele

Angenommen folgendes HTML:

html

<canvas id="inking-surface" width="1280" height="720"></canvas>

Das folgende JavaScript weist eindeutigen Zeigern, die mit einer Leinwand interagieren, eine unterschiedliche Zeichenfarbe zu:

const colorBlue = 0;
const colorGreen = 1;
const colorYellow = 2;
const colors = [colorBlue, colorGreen, colorYellow];

const pointerToColorMap = new Map();
const colorAssignmentIndex = 0;

const canvas = document.querySelector("#inking-surface");

// Listen for a pointerdown event and map the persistentDeviceId to a color
// if it exists and has not been mapped yet
canvas.addEventListener("pointerdown", (e) => {
  if (e.persistentDeviceId && !pointerToColorMap.has(e.persistentDeviceId)) {
    pointerToColorMap.set(e.persistentDeviceId, colors[colorAssignmentIndex]);

    // Bump the color assignment index and loop back over if needed
    colorAssignmentIndex = (colorAssignmentIndex + 1) % colors.length;
  }
});

// Listen for a `pointermove` and get the color assigned to this pointer
// if persistentDeviceId exists and the pointer has been color mapped
canvas.addEventListener("pointermove", (e) => {
  if (e.persistentDeviceId && pointerToColorMap.has(e.persistentDeviceId)) {
    const pointerColor = pointerToColorMap.get(e.persistentDeviceId);
    // Do some inking on the <canvas>
  }
});

Spezifikationen

Specification
Pointer Events # dom-pointerevent-persistentdeviceid

Browser-Kompatibilität

BCD tables only load in the browser