Chrome 47 enthält eine neue Funktion, mit der Sie besser nachvollziehen können, wie Nutzer mit Ihrer Website interagieren: InputDeviceCapabilities. Gehen wir noch einen Schritt zurück und sehen uns an, warum das wichtig ist.
DOM-Eingabeereignisse sind eine Abstraktion über Eingabeereignisse auf niedriger Ebene, die lose mit der physischen Geräteeingabe verbunden 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, die Details des physischen Geräts zu erhalten, das für ein Ereignis verantwortlich ist.
Außerdem können bestimmte Eingabetypen 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, wenn sie sowohl die Maus- als auch die Touchbedienung unterstützen möchten. Es ist schwierig zu erkennen, ob ein mousedown-Ereignis tatsächlich eine neue Eingabe von einer Maus darstellt oder nur ein Kompatibilitätsereignis für ein zuvor verarbeitetes Touchstart-Ereignis ist.
Die neue InputDeviceCapabilities API bietet über ein sourceCapabilities-Objekt im UIEvent Details zu den zugrunde liegenden Quellen von Eingabeereignissen.
Das Objekt hat eine firesTouchEvents-Eigenschaft, die je nachdem, wie das Ereignis durch die Nutzeraktion generiert wurde, auf true oder false festgelegt ist.
Die Frage ist: Wo sollte dies verwendet werden?
Abgesehen von Pointer-Ereignissen verarbeiten viele Entwickler heute die Logik für die Interaktion in der Touch-Ebene, um zu verhindern, dass Standard „gefälschte“ Mausereignisse erstellt.Dieses Design funktioniert in vielen Szenarien gut und muss nicht geändert werden, um InputDeviceCapabilities zu nutzen.
In einigen Fällen sollten Sie das Touch-Ereignis jedoch nicht preventDefault. Beispielsweise sollten durch Tippen weiterhin Klickereignisse gesendet und der Fokus geändert werden. In diesen Fällen können Sie mithilfe der Informationen in der Property MouseEvent.sourceCapabilities.firesTouchEvents die Logik für Touch- und Mausereignisse in einem Modell zusammenführen, das ähnlich ist wie die Logik für Zeigerereignisse. Sie können also nur einen Code-Block verwenden, der die Interaktionslogik verwaltet. Außerdem haben Entwickler so eine einfachere Möglichkeit, die Logik für Browser zu teilen, die Pointer-Ereignisse unterstützen und solche, die das nicht tun.
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 diese Funktion von Rick Byers Polyfilled wurde, sodass Sie sie auf den meisten Plattformen verwenden können.
Derzeit ist diese API minimal und konzentriert sich darauf, ein bestimmtes Problem bei der Identifizierung von Mausereignissen zu lösen, die von Touch-Ereignissen abgeleitet sind.
Es ist sogar möglich, eine Instanz von InputDeviceCapabilities zu erstellen, die jedoch nur firesTouchEvents enthält. In Zukunft wird die Funktion voraussichtlich erweitert, damit Sie mehr über alle Eingabegeräte auf dem System eines Nutzers erfahren. Wir würden uns über Ihr Feedback zu
Anwendungsfällen freuen.