Signatur
Beschreibung
Die Schnittstelle InputDeviceCapabilities gehört zur Input Device Capabilities API. Sie liefert Informationen über das physische Gerät oder eine Gruppe verwandter Geräte, die ein Eingabeereignis erzeugt haben. Man greift auf eine Instanz meist über die Eigenschaft UIEvent.sourceCapabilities zu, die es bei Maus-, Tastatur-, Fokus- und Touch-Ereignissen gibt.
Der wichtigste Anwendungsfall ist das Erkennen sogenannter Kompatibilitäts-Mausereignisse. Nach einem Tipp auf den Touchscreen erzeugen Browser zusätzlich mousedown, mouseup und click, damit ältere Seiten weiter funktionieren. Wer touchstart und mousedown getrennt behandelt, führt dieselbe Aktion sonst zweimal aus. Ist event.sourceCapabilities.firesTouchEvents auf true gesetzt, stammt das Mausereignis von einem Touch-Gerät und lässt sich gezielt übergehen.
Die Schnittstelle hat folgende Eigenschaften (alle schreibgeschützt):
firesTouchEvents–boolean: Gibt an, ob das Gerät Touch-Ereignisse auslöst.pointerMovementScrolls–boolean: Gibt an, ob das Gerät bei Zeigerbewegung scrollt statt einen Zeiger zu bewegen, z. B. bei einem Touchscreen. Diese Eigenschaft ist experimentell.
Mit dem Konstruktor new InputDeviceCapabilities(options) lassen sich eigene Instanzen erzeugen, etwa um synthetische Ereignisse mit passender sourceCapabilities auszulösen. Für neuen Code sind Pointer Events mit pointerType meist die bessere und browserübergreifende Wahl.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $options | Object | {} | Optionales Objekt (InputDeviceCapabilitiesInit) für den Konstruktor new InputDeviceCapabilities(options). |
| $options.firesTouchEvents | boolean | false | Legt fest, ob das beschriebene Gerät Touch-Ereignisse erzeugt. |
| $options.pointerMovementScrolls | boolean | false | Legt fest, ob Zeigerbewegungen bei diesem Gerät scrollen (experimentell). |
Rückgabewert
UIEvent.sourceCapabilities kann der Wert auch null sein, etwa bei synthetischen Ereignissen oder wenn kein Gerät bekannt ist.Beispiele
Doppelte Verarbeitung von Touch und Maus vermeiden
const button = document.querySelector('#menu-toggle');
const toggleMenu = () => {
document.body.classList.toggle('menu-open');
console.log('Menü umgeschaltet');
};
button.addEventListener('touchstart', (event) => {
toggleMenu();
});
button.addEventListener('mousedown', (event) => {
// Kompatibilitäts-Mausereignis nach einem Tipp übergehen
if (event.sourceCapabilities?.firesTouchEvents) {
return;
}
toggleMenu();
});Eigene Instanz mit dem Konstruktor erzeugen
if ('InputDeviceCapabilities' in window) {
const touchDevice = new InputDeviceCapabilities({ firesTouchEvents: true });
const mouseDevice = new InputDeviceCapabilities();
console.log(touchDevice.firesTouchEvents);
console.log(mouseDevice.firesTouchEvents);
} else {
console.log('InputDeviceCapabilities wird nicht unterstützt');
}Synthetisches Ereignis mit Gerätefähigkeiten auslösen
const target = document.querySelector('#canvas');
target.addEventListener('click', (event) => {
const caps = event.sourceCapabilities;
console.log('Quelle ist Touch-Gerät:', caps ? caps.firesTouchEvents : 'unbekannt');
});
const simulated = new MouseEvent('click', {
bubbles: true,
sourceCapabilities: new InputDeviceCapabilities({ firesTouchEvents: true })
});
target.dispatchEvent(simulated);// Wichtig · Fallstricke
Browserunterstützung: Die API ist experimentell und steht nur in Chromium-basierten Browsern zur Verfügung. Firefox und Safari unterstützen sie nicht. Prüfe deshalb vorher mit 'InputDeviceCapabilities' in window, ob sie vorhanden ist, und greife über Optional Chaining zu (event.sourceCapabilities?.firesTouchEvents).
Der Wert kann null sein: Bei Ereignissen aus dispatchEvent() ohne die Option sourceCapabilities oder bei unbekannter Quelle ist sourceCapabilities gleich null. Ein direkter Zugriff auf firesTouchEvents wirft dann einen TypeError.
Alternative: Für browserübergreifenden Code solltest du pointerdown, pointerup usw. verwenden und event.pointerType auswerten ("mouse", "touch" oder "pen"). Damit entfallen getrennte Touch- und Maus-Handler weitgehend.
Die Eigenschaft beschreibt kein Gerät, sondern eine Fähigkeit: firesTouchEvents sagt nur, ob Touch-Ereignisse ausgelöst werden. Welches Gerät genau verwendet wurde, erfährst du daraus nicht. Für Rückschlüsse auf die Hardware (Fingerprinting) ist die Eigenschaft nicht geeignet.