Funktionen des Eingabegeräts

In Chrome 47 gibt es eine neue Funktion, mit der sich besser nachvollziehen lässt, wie Nutzer mit Ihrer Website interagieren: InputDeviceCapabilities. Gehen wir etwas zurück, um zu erfahren, warum das wichtig ist.

DOM-Eingabeereignisse sind eine Abstraktion über Eingabeereignissen auf niedriger Ebene, die lose mit der physischen Geräteeingabe (z.B. click-Ereignisse können mit einer Maus, einem Touchscreen oder einer Tastatur ausgelöst werden. Es gibt jedoch ein Problem: Es gibt keine einfache Methode, um die Details des für ein Ereignis verantwortlichen physischen Geräts zu ermitteln.

Darüber hinaus können bestimmte Eingabetypen aus Kompatibilitätsgründen weitere „fiktive“ DOM-Eingabeereignisse generieren. Ein solches vorgetäuschtes DOM-Ereignis tritt auf, wenn ein Nutzer auf einen Touchscreen tippt, z. B. auf einem Mobiltelefon. Es löst nicht nur Touch-Ereignisse, sondern aus Kompatibilitätsgründen auch Mausereignisse aus.

Dies führt bei Entwicklern zu Problemen, wenn sie sowohl die Maus- als auch die Berührungseingabe unterstützt. Es lässt sich nur schwer feststellen, ob ein mousedown-Ereignis tatsächlich eine neue Eingabe durch eine Maus darstellt oder nur ein Kompatibilitätsereignis für ein zuvor verarbeitetes touchstart-Ereignis ist.

Die neue InputDeviceCapabilities API stellt Details zu den zugrunde liegenden Quellen von Eingabeereignissen über ein sourceCapabilities-Objekt für UIEvent bereit.
Das Objekt hat eine firesTouchEvents-Eigenschaft, die auf true oder false gesetzt ist, je nachdem, wie das Ereignis durch die Nutzeraktion generiert wurde.

Die Frage lautet: Wo sollte dies verwendet werden?

Abgesehen von Zeigerereignissen kümmern sich viele Entwickler heutzutage um die Logik der Interaktion in der Touch-Layer. Sie verhindern Standard, dass das Erstellen von "falschen" Mausereignissen von vornherein vermieden wird. Dieses Design funktioniert in vielen Szenarien gut und muss nicht geändert werden, um InputDeviceCapabilities nutzen zu können.

In einigen Fällen möchten Sie jedoch nicht, das Touch-Ereignis „preventDefault“ zu verhindern, beispielsweise, wenn durch Tippen Klickereignisse gesendet und der Fokus geändert werden soll. In diesen Fällen können Sie mithilfe der Informationen aus der Eigenschaft MouseEvent.sourceCapabilities.firesTouchEvents damit beginnen, die Logik für berührungs- und mausbasierte Ereignisse in einem Modell zu konsolidieren, das der Verwaltung der Logik mit Zeigerereignissen ähnelt ist. Das heißt, Sie können nur einen Satz Code haben, der die Interaktionslogik verwaltet und Entwicklern eine einfachere Möglichkeit bietet, die Logik unter 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 dies von Rick Byers Polyfilled durchgeführt wurde, sodass du es auf den meisten Plattformen verwenden kannst.

Heute 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 ist eine Erweiterung geplant, damit Sie mehr über alle Eingabegeräte in einem Nutzersystem erfahren können. Wir freuen uns auf Ihr Feedback zu Anwendungsfällen.