new InputDeviceCapabilities() — Methode · JavaScript-Referenz

Signatur

new InputDeviceCapabilities(options)

Beschreibung

Der Konstruktor InputDeviceCapabilities() erzeugt ein Objekt, das beschreibt, was ein physisches Eingabegerät kann. Browser hängen solche Objekte automatisch über die Eigenschaft UIEvent.sourceCapabilities an Eingabe-Ereignisse an. So erkennt man zum Beispiel, ob ein mousedown von einer echten Maus kommt oder vom Browser aus einer Berührung nachgebildet wurde.

Den Konstruktor selbst braucht man vor allem, wenn man eigene Ereignisse erzeugt, etwa in Tests oder Bibliotheken, die Nutzereingaben nachbilden. Das erzeugte Objekt übergibt man im Initialisierungs-Wörterbuch als sourceCapabilities an Konstruktoren wie new MouseEvent(), new PointerEvent() oder new FocusEvent(). Ereignis-Code, der sourceCapabilities auswertet, verhält sich dann wie bei echten Geräten.

Das Objekt ist nach dem Erzeugen unveränderlich. Es hat die schreibgeschützten Eigenschaften firesTouchEvents und pointerMovementScrolls. Beide spiegeln die Werte aus dem options-Objekt wider.

Rückgabewert

Typ

InputDeviceCapabilities

Beschreibung

Ein neues, unveränderliches InputDeviceCapabilities-Objekt mit den angegebenen Fähigkeiten.

Beispiele

Objekt erzeugen und Eigenschaften lesen

if ('InputDeviceCapabilities' in window) {
  const touchDevice = new InputDeviceCapabilities({
    firesTouchEvents: true,
    pointerMovementScrolls: true
  });
  console.log(touchDevice.firesTouchEvents);
  console.log(touchDevice.pointerMovementScrolls);

  const standard = new InputDeviceCapabilities();
  console.log(standard.firesTouchEvents);
} else {
  console.log('InputDeviceCapabilities wird nicht unterstützt');
}

true true false

Nachgebildeten Klick mit Touch-Herkunft auslösen (z. B. im Test)

const button = document.querySelector('#kaufen');

button.addEventListener('click', (event) => {
  const caps = event.sourceCapabilities;
  console.log(caps?.firesTouchEvents ? 'Klick per Touch' : 'Klick per Maus/Tastatur');
});

const caps = new InputDeviceCapabilities({ firesTouchEvents: true });
button.dispatchEvent(new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  sourceCapabilities: caps
}));

Klick per Touch

Nachgebildete Maus-Ereignisse nach Touch ignorieren

const area = document.querySelector('#zeichenflaeche');

area.addEventListener('touchstart', () => {
  console.log('Touch verarbeitet');
});

area.addEventListener('mousedown', (event) => {
  // Maus-Ereignisse, die der Browser aus einer Berührung erzeugt hat, überspringen
  if (event.sourceCapabilities?.firesTouchEvents) return;
  console.log('Echte Maus verarbeitet');
});

// Wichtig · Fallstricke

Experimentell und nicht standardisiert: Die API gibt es nur in Chromium-Browsern. Firefox und Safari unterstützen sie nicht. Prüfe deshalb immer vorher, ob sie vorhanden ist, z. B. mit 'InputDeviceCapabilities' in window. Greife auf event.sourceCapabilities mit optionaler Verkettung (?.) zu.
event.sourceCapabilities kann null sein, z. B. bei Ereignissen, die mit dispatchEvent() ohne sourceCapabilities ausgelöst wurden, oder wenn der Browser das Gerät nicht kennt.
Das Objekt beschreibt nur Fähigkeiten und kein bestimmtes Gerät. Hersteller, Modell oder Geräte-ID lassen sich damit nicht auslesen.
Die Eigenschaften sind schreibgeschützt. Wer andere Werte braucht, erzeugt ein neues Objekt.
Für eine browserübergreifende Unterscheidung der Eingabeart ist PointerEvent.pointerType ("mouse", "pen", "touch") meist die bessere Wahl.

Siehe auch

new GPUInternalError() new InputEvent() new RTCIceCandidate() new DeviceMotionEvent() new Notification()