InputDeviceCapabilities.firesTouchEvents — Eigenschaft · JavaScript-Referenz

Signatur

InputDeviceCapabilities.firesTouchEvents

Beschreibung

Die Eigenschaft firesTouchEvents gehört zur Schnittstelle InputDeviceCapabilities. Dieses Objekt erreichen Sie über UIEvent.sourceCapabilities. Die Eigenschaft beschreibt also das physische Gerät, das ein bestimmtes Ereignis ausgelöst hat, und nicht den Browser oder die Hardware allgemein.

Ihr Hauptzweck ist die Unterscheidung echter Mausereignisse von kompatiblen Mausereignissen. Nach einem Tippen auf den Bildschirm erzeugen Browser aus Kompatibilitätsgründen zusätzlich mousedown, mouseup und click. Hat ein Mausereignis sourceCapabilities.firesTouchEvents === true, stammt es von einem Touch-Gerät. Wurde die Berührung schon in einem touchstart-Handler verarbeitet, können Sie es ignorieren. So vermeiden Sie, dass dieselbe Aktion doppelt ausgeführt wird.

Die Eigenschaft ist schreibgeschützt und wird beim Erzeugen des Objekts über das Wörterbuch InputDeviceCapabilitiesInit festgelegt. Mit dem Konstruktor new InputDeviceCapabilities({ firesTouchEvents: true }) können Sie eigene Objekte anlegen, etwa für synthetische Ereignisse in Tests.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das auslösende Gerät Touch-Events erzeugt (z. B. Touchscreen), sonst false (z. B. Maus oder Touchpad ohne Touch-Events).

Beispiele

Kompatible Mausereignisse nach Touch ignorieren

const button = document.querySelector('#menu-toggle');

const toggleMenu = () => document.body.classList.toggle('menu-open');

button.addEventListener('touchstart', (event) => {
  toggleMenu();
}, { passive: true });

button.addEventListener('mousedown', (event) => {
  // Von Touch abgeleitete Mausereignisse überspringen – sonst würde das Menü doppelt umgeschaltet
  if (event.sourceCapabilities?.firesTouchEvents) {
    return;
  }
  toggleMenu();
});

Eingabegerät eines Klicks protokollieren

document.addEventListener('click', (event) => {
  const caps = event.sourceCapabilities;
  if (caps === undefined) {
    console.log('sourceCapabilities wird nicht unterstützt');
  } else if (caps === null) {
    console.log('Kein physisches Gerät (z. B. per Skript ausgelöst)');
  } else {
    console.log(caps.firesTouchEvents ? 'Touch-Eingabe' : 'Maus/Touchpad');
  }
});

Maus/Touchpad // bei Mausklick Touch-Eingabe // bei Tippen auf Touchscreen

Eigene Capabilities für synthetische Ereignisse

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

  const evt = new MouseEvent('mousedown', { sourceCapabilities: touchCaps });
  console.log(evt.sourceCapabilities.firesTouchEvents);

  touchCaps.firesTouchEvents = false; // schreibgeschützt: wird ignoriert
  console.log(touchCaps.firesTouchEvents);
}

true true true

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Eigenschaft ist experimentell und nur in Chromium-Browsern verfügbar. Firefox und Safari kennen weder InputDeviceCapabilities noch UIEvent.sourceCapabilities. Prüfen Sie deshalb immer mit optionaler Verkettung (event.sourceCapabilities?.firesTouchEvents) oder mit 'InputDeviceCapabilities' in window.
Kann null sein: Bei Ereignissen, die per Skript ausgelöst werden (dispatchEvent, element.click()), ist sourceCapabilities meist null. Ein direkter Zugriff auf .firesTouchEvents würde dann einen TypeError werfen.
Keine Gerätererkennung: Der Wert sagt nichts darüber aus, ob das System überhaupt einen Touchscreen hat. Er beschreibt nur das Gerät des jeweiligen Ereignisses. Um allgemein Touch-Unterstützung zu prüfen, eignen sich eher matchMedia('(pointer: coarse)') oder navigator.maxTouchPoints.
Moderne Alternative: Pointer Events mit PointerEvent.pointerType ("mouse", "touch", "pen") funktionieren in allen Browsern und lösen das Problem der doppelten Ereignisse meist eleganter.
Schreibzugriffe auf die Eigenschaft werden stillschweigend ignoriert, im Strict Mode lösen sie einen TypeError aus.

Siehe auch

VRDisplayCapabilities.canPresent VRDisplayCapabilities.hasPosition AudioPlaybackStats.underrunEvents GPUDevice.features VRDisplayCapabilities.hasOrientation