Chrome 47 bietet eine neue Funktion, mit der Sie besser nachvollziehen können, wie Nutzer mit Ihrer Website interagieren: InputDeviceCapabilities. Sehen wir uns an, warum das wichtig ist.
DOM-Eingabeereignisse sind eine Abstraktion über Low-Level-Eingabeereignissen, die lose an die Eingabe physischer Geräte gebunden sind (z.B. click-Ereignisse können durch eine Maus, einen Touchscreen oder eine Tastatur ausgelöst werden. Es gibt jedoch ein Problem: Es gibt keine einfache Methode, um die Details des physischen Geräts zu ermitteln, das für ein Ereignis verantwortlich ist.
Außerdem können bestimmte Arten von Eingaben aus Kompatibilitätsgründen weitere „gefälschte“ DOM-Eingabeereignisse generieren. Ein solches gefälschtes DOM-Ereignis tritt auf, wenn ein Nutzer auf einen Touchscreen tippt (z. B. auf einem Smartphone). Dabei werden nicht nur Touch-Ereignisse, sondern aus Kompatibilitätsgründen auch Mausereignisse ausgelöst.
Dies führt zu Problemen für Entwickler, die sowohl Maus- als auch Toucheingabe unterstützen. Es ist schwierig zu erkennen, ob ein mousedown-Ereignis tatsächlich eine neue Eingabe über eine Maus darstellt oder nur ein Kompatibilitätsereignis für ein zuvor verarbeitetes „touchstart“-Ereignis ist.
Die neue InputDeviceCapabilities API bietet Details zu den zugrunde liegenden Quellen von Eingabeereignissen über ein sourceCapabilities-Objekt im UIEvent.
Das Objekt hat die Eigenschaft firesTouchEvents, die je nachdem, wie das Ereignis durch die Nutzeraktion generiert wurde, auf true oder false festgelegt ist.
Die Frage ist: Wo sollte das verwendet werden?
Abgesehen von Pointer Events verarbeiten viele Entwickler heute die Logik für die Interaktion in der Touch-Ebene, um zu verhindern, dass überhaupt „falsche“ Mausereignisse erstellt werden.Dieses Design funktioniert in vielen Szenarien gut und muss nicht geändert werden, um InputDeviceCapabilities zu nutzen.
In einigen Fällen möchten Sie das Touch-Ereignis jedoch nicht mit preventDefault verhindern, z. B. wenn Sie möchten, dass bei Tippen weiterhin „click“-Ereignisse gesendet und der Fokus geändert wird. In diesen Fällen können Sie mit den Informationen in der Property MouseEvent.sourceCapabilities.firesTouchEvents die Logik für berührungs- und mausbasierte Ereignisse in einem Modell zusammenfassen, das ähnlich ist wie die Verwaltung der Logik mit Pointer Events. Sie können also nur einen Satz von Code haben, der die Interaktionslogik verwaltet und Entwicklern eine einfachere Möglichkeit bietet, Logik zwischen Browsern zu teilen, die Zeigerereignisse unterstützen und nicht unterstützen.
function addMouseEventListener(target, type, handler, capture) {
target.addEventListener(type, function(e) {
if (e.sourceCapabilities.firesTouchEvents)
return false;
return handler(e);
}, capture);
}
Die gute Nachricht ist, dass Rick Byers diese Funktion Polyfilled hat, sodass Sie sie auf den meisten Plattformen verwenden können.
Derzeit ist diese API minimal und konzentriert sich auf die Lösung eines bestimmten Problems bei der Identifizierung von Mausereignissen, die aus Touch-Ereignissen abgeleitet werden.
Es ist sogar möglich, eine Instanz von InputDeviceCapabilities zu instanziieren. Sie enthält jedoch nur firesTouchEvents. In Zukunft soll die Funktion erweitert werden, damit Sie mehr über alle Eingabegeräte auf dem System eines Nutzers erfahren können. Wir freuen uns über Ihr Feedback zu Anwendungsfällen.