Problemloser Zugriff auf das Internet über sämtliche Eingabearten: Maus-, Touch- und Zeigerereignisse

Vor Kurzem haben wir die Unterstützung der Touchereignis-API in Internet Explorer für Windows Phone 8.1 Update angekündigt. Dies ist Teil unseres Engagements für einen enfacheren Internetzugriff. IE unterstützt nun also die drei wichtigsten Zeigereingabe-APIs: Maus-, Touch- und Zeigerereignisse. Je besser mobile Browser werden, desto drängender stellt sich Entwicklern die Frage, welche API verwendet werden soll.

Um Entwicklern bei der Entscheidung zu helfen, welche API wann zum Einsatz kommen soll, möchten wir unsere aktuelle Richtlinie sowie unsere Konzepte für die Webplattform der Zukunft erläutern, auch in Hinsicht darauf, dass Zeigerereignisse in Kürze von Firefox unterstützt werden, während Google neulich beschlossen hat, die Spezifikation nicht zu implementieren.

Vergleich der Vor- und Nachteile jedes Modells

Wir möchten, dass Entwickler die Eingabetechnologie nutzen können, die am Besten für ihre Zwecke geeignet ist. Wir stellen Touchereignisse bereit, die mit den meisten modernen Browsern kompatibel sind, sowie aktuelle Zeigerereignisse, die einfacheren Code, zusätzliche Funktionen, erweiterten Gerätesupport, verbesserte Reaktionsfähigkeit und optimale Hardwarebeschleunigung ermöglichen. Dies ist eine Übersicht der Eigenschaften und Funktionen jedes Modells.

	Mausereignisse	Touchereignisse	Zeigerereignisse
Unterstützt Maus		1
Unterstützt Einzeltouch	2
Unterstützt Multitouch
Unterstützt Stift, Kinect und andere Geräte	2
Umfasst die Ereignisse „Über“, „Außerhalb“, „Eingabe“, „Verlassen“ und „Darauf zeigen“
Asynchrones Initiieren von Verschieben/Zoomen zur Hardwarebeschleunigung
W3C-Spezifikation		3	3
Browserübergreifend verwendbar auf Mobilgeräten			4
Browserübergreifend verwendbar auf Desktopgeräten			4

1 Zumindest in einigen Android-Browsern werden bei Mauseingaben möglicherweise Touchereignisse ausgelöst werden. Diese Mauseingaben lassen sich, wenn Touchereignissen verwendet werden, jedoch nicht von tatsächlichen Toucheingaben unterschieden.

2 Alle Browser lösen bei Einzeltoucheingaben einige Mausereignisse aus, um die Kompatibilität mit Webseiten zu gewährleisten, die für Mauseingaben entwickelt wurden. Momentan ist es jedoch bei der Verwendung von Touchereignissen nicht möglich, tatsächliche Mauseingaben von Toucheingaben zu unterscheiden. In ähnlicher Weise lösen Kinect-Gesteneingaben in IE für Xbox zwecks grundlegender Kompatibilität einige Mausereignisse aus.

3 Zeigerereignisse sind derzeit eine Candidate Recommendation und sollen demnächst den Status „Recommendation“ erhalten. Touchereignisse verfügen bereits über diesen Status. Im Jahr 2012 hat die Arbeitsgruppe für Webereignisse die Weiterentwicklung von Version 2 der Touchereignisse eingestellt, um sich stattdessen der Standardisierung von Zeigerereignissen zu widmen.

4 Zeigerereignisse werden von IE und bald auch von Firefox vollständig unterstützt. Teilweise unterstützt (touch-action-API) werden diese derzeit in Chrome, Firefox und Opera. Für Safari WebKit ist eine teilweise Unterstützung geplant. Über Polyfills wie Google Polymer Pointer Events und Hand.JS kann das Zeigerereignismodell browserübergreifend verwendet werden.

Einige Unterschiede und Probleme werden in diesem HTML5 Rocks-Artikel ausführlich erläutert.

Performance

Die Performance ist bei der Eingabe von entscheidender Bedeutung, insbesondere für die Toucheingabe. Benutzer sollen den Eindruck gewinnen, Websites tatsächlich zu bewegen – auch wenn Sie in Wirklichkeit nur mit dem Finger über den Bildschirm wischen. Aus diesem Grund hat unser Entwicklungsteam drei Jahre lang an der neuen GPU-beschleunigten Quad-Thread-Architektur der Touchpipeline von IE gearbeitet, die in IE10 eingeführt und für IE11 verbessert wurde. Außerdem wurden Zeigerereignisse entwickelt, die diese Architektur nutzen und seither auch in anderen modernen Browsern verwendet werden.

Die wichtigsten Touchaktionen sind normalerweise Zoomen und Verschieben, diese machen 60 % aller Touchgesten in IE und Chrome für Windows aus. Fast jede systemeigene App, Web-App oder Website verwendet Verschieben und/oder Zoomen. Die Eingabe-Performance lässt sich bei dieser Geste besonders gut untersuchen. Wenn das Verschieben am Anfang zu langsam (das Objekt „springt“ nach einer Verzögerung zum Finger) oder abgehackt (Frames werden übersprungen) erfolgt, fällt dies schnell negativ auf.

Für Touchereignisse muss vor dem Verschieben oder Zoomen JavaScript synchron ausgeführt werden. Dies kann zu signifikanten Performanceproblemen im Bereich von einigen Hundert Millisekunden oder mehr führen. Der Wechsel zu Zeigerereignissen kann die Benutzerfreundlichkeit der Toucheingabe daher entscheidend verbessern:

Demo möglicher Auswirkungen von Touchereignissen auf die Performance von Verschieben und Zoomen (sowohl auf Android LG Nexus 5 als auch Windows Phone HTC 8x).
Zeigerereignisse ermöglichen hardwarebeschleunigte, asynchrone Touchaktionen und können so in vielen Fällen die Performance verbessern.

Auf dieser Testseite (konfiguriert mit 1000 ms Verzögerung) finden Sie ein von Rick Byers, einem Mitglied des Chrome-Teams, entwickeltes einfaches Beispiel. Es ist deutlich erkennbar, dass beim Verschieben mit Touchereignissen in IE der erste Frame erst nach 1020 ms dargestellt wird, nachdem der Touchkontakt bereits 4,8 cm entfernt ist. Indem die Touchereignishandler durch Zeigerereignishandler ersetzt werden, lässt sich diese Latenz auf nur 31 ms und 0,3 cm verringern – eine mehr als 32-fache Verbesserung.

Die Verzögerung auf dieser Testseite wurde künstlich verursacht, demonstriert aber ein grundlegendes Performanceproblem, das im Web häufig anzutreffen ist. In der Praxis gibt es sogar Seiten mit größerer Verzögerung als den 1000 ms im Beispiel. Diese veränderliche und unbegrenzte Abhängigkeit vom Primärthread des Browsers führt zu einem unvorhersagbaren Verhalten und verhindert die optimale Reaktionszeit von 1 ms. Die Mitarbeiter von Microsoft Research konnten die signifikanten Auswirkungen einer derartigen Latenzreduzierung auf die Benutzerfreundlichkeit demonstrieren. Reaktionszeiten von 1 ms beim Verschieben/Zoomen werden immer noch nicht ganz erreicht, aber die Einführung von Zeigerereignissen sind ein wichtiger Schritt in die richtige Richtung.

Zeigerereignisse bieten außerdem zusätzliche Funktionen, die von Entwicklern gewünscht wurden und bei Touchereignissen nicht bereitgestellt werden können. Dies sind beispielsweise die Übergangsereignisse „Über“, „Außerhalb“, „Eingabe“ und „Verlassen“. Zusätzliche Funktionen bedeuten jedoch immer auch zusätzliche Nachteile. Wir haben daher daran gearbeitet, diese Nachteile so gering wie möglich zu halten. Die für diese Funktionen erforderlichen zusätzlichen Treffertests erfordern in der Regel 0,15 ms. Wir haben verschiedene Vorschläge zur Verbesserung, falls sich tatsächlich herausstellen sollte, dass dies das Erreichen einer Performance von 60 FPS für Entwickler unmöglich macht.

Kompatibilität

In unserer Ankündigung der Unterstützung von Touchereignissen haben wir bereits Probleme mit dem Web auf Desktop-PCs erwähnt, die eine Kompatibilität dieser API mit diesen Geräten verhindern. Wenn z. B. Touchereignisse auf einem Desktop aktiviert sind, verhindert folgende übliche Art der Programmierung die Mausunterstützung:

Durch diesen Code können in einem Browser, der Touchereignisse unterstützt, keine Mausereignisse verarbeitet werden (unabhängig davon, ob das Gerät tatsächlich über einen Touchscreen verfügt). Dies verursacht schwerwiegende Probleme. Beispielsweise lassen sich Menüs, Dropdownlisten oder gemeinsame Symbole auf Websites wie Web MD, Macys, Onet, Pages Juanes, Globo, Samsung, Taobao oder Huffington Post mit der Maus nicht mehr bedienen.

Folgende Maßnahmen sollen die Benutzerfreundlichkeit verbessern und Entwicklern die Arbeit erleichtern:

• Unterstützung von Touchereignissen in IE unter Windows Phone (bereits implementiert)
• Zusammenarbeit mit Websiteentwicklern, um die oben beschriebenen Probleme zu lösen und APIs sinnvoll zu nutzen (in Arbeit, weitere Informationen in E-Mails oder Tweets von unserem Outreach-Team und unter webcompat.com)
• Einführung von Touchereignissen auf allen unserer Plattformen, um die Unterstützungsmatrix für Entwickler zu vereinfachen (in Arbeit)
• Mitarbeit bei der Implementierung von Zeigerereignissen auf anderen Plattformen (in Arbeit für Firefox und Chrome)
• Aktive Zusammenarbeit mit Website- und Framework-Entwicklern, um von diesen Feedback über die gewünschte Ausrichtung der Webplattform zu erhalten
• Freigabe unserer internen Entwicklungsdokumente, Architekturdiagramme und Testmethoden sowie unseres Codes für andere Browser (in Arbeit)

Für viele Entwickler ist es am einfachsten, Zeigerereignisse mit einem Polyfill für andere Browser zu verwenden, wie z. B. Google Polymer Pointer Events oder Hand.JS. Wenn Sie Touchereignisse verwenden möchten, stellen Sie jedoch sicher, dass auch Mauseingaben unterstützt werden. Gehen Sie nie davon aus, dass wenn Touchereignis-APIs vorhanden sind, das Gerät auch über einen Touchscreen verfügt.

Fazit

Eingabeereignisse bleiben eine der größten Herausforderungen für die Interoperabilität zwischen Browsern und Geräten. Wie bei den meisten Problemen dieser Art sind die Folgen unnötig komplexer Code und Kompatibilitätsprobleme für Entwickler und Benutzer. Wir gehen diese Probleme durch die Arbeit an der Interoperabilität unseres Browsers sowie unserer Beteiligung an der W3C-Standardisierung an.

Wir möchten eine Plattform entwickeln, mit der sowohl Webentwickler als auch Benutzer zufrieden sind. Wir sind gespannt auf Ihr Feedback. Welche Vorschläge haben Sie? Was funktioniert nicht? Welche Funktionen erwarten Sie in Zukunft? Schreiben Sie uns unter @iedevchat oder auf den Problembehebungsblogs von Chrome und Firefox.

Jacob Rossi
Program Manager