Immerhin wird derzeit fleißig daran gearbeitet, einheitlichere Möglichkeiten für den Umgang mit Multi-Touch-Events im Web bereitzustellen. So sollen zum Beispiel Pointer Events dafür sorgen, dass der Cross-Browser-Support von Touch-Events deutlich weniger komplex wird, allerdings sind sie nur eine von vielen Touch-Technologien, an denen derzeit gearbeitet wird. In seinem Artikel How Pointer Events Will Make Cross-Browser Touch Support Easy erklärt David Rousset, wie Pointers zum Beispiel genutzt werden können.
Dafür dienen Pointer Events
Schon im September 2012 hat Microsoft die MSPointers beim W3C zur Standardisierung eingereicht; im Februar diesen Jahres wurden sie als W3C Empfehlung gekennzeichnet. Zudem veröffentlichte das MS-Open-Tech-Team einen ersten Pointer-Events-Prototyp für WebKit, und Anfang August kündigte auch Mozilla die Implementierung von Pointer Events in Firefox Nightly an.
Allerdings, so betont Rousset, experimentiert er nicht unter dem Gesichtspunkt „Device Share“ mit Pointer Events, sondern weil insbesondere Microsofts Ansatz zum grundlegenden Input-Umgang sich deutlich von den zur Verfügung stehenden Methoden unterscheidet. Der Unterschied liegt dabei vor allem darin, dass Entwickler direkt für eine abstraktere Input-Methode – die sogenannten Pointer – schreiben können, anstatt separat für jede Input-Methode den entsprechenden Code zu erstellen.
Hinter den Pointer Events steckt also vor allem die Idee, sowohl Maus-, Stift- und Touch-Devices über eine einzige Code-Base anzusprechen – und zwar mithilfe eines Patterns, das den klassischen Maus-Events entspricht. Das ist an sich auch nicht problematisch, immerhin haben alle drei Eingabemethoden einige Properties gemeinsam, mit denen Pointer bewegt und Elemente angeklickt werden können. Neben den offensichtlichen, gängigen Events wie pointerdown, pointermove und pointerup, die jeweils den entsprechenden Maus-Events gleichkommen, gibt es auch noch spezifischere Events, etwa pointerover, pointerout oder pointercancel.
Zudem lassen sich mithilfe von Pointer Events – falls nötig – andere User Experiences bieten, als das mit der Default-Einstellung für die Maus möglich wäre.
Umgang mit Touch Events
Grundsätzlich funktioniert der meiste JavaScript-Code, der für den Umgang mit Mouse-Events zuständig ist, auch ohne dass Pointer Events im Code gehandhabt werden – und das zumindest bei mousedown und mouseup auch problemlos. Ein wenig anders sieht es dagegegen bei mousemove aus. Hier lässt sich das Mouse-Event nämlich nicht 1:1 zu dem entsprechenden Pointer-Event umsetzen, wenn statt mit der Maus mit Touch-Gesten gearbeitet wird.
Ähnlich umständlich wird es auch bei Multi-Touch-Gesten. Umgehen lässt sich das Problem, indem die Mouse-Events im bestehenden Code mit den entsprechenden Pointer Events ersetzt werden. Ein Problem gibt es dabei jedoch trotzdem: sämtliche Eingabemethoden werden nur in Browsern wie gewünscht gehandhabt, in denen auch Pointer Events unterstützt werden. Browser wie IE9, Chrome, Opera und Safari haben dabei also schlechte Karten.
Notwendig wird darum also ein passender Fallback-Code. Der beste Weg, um mit Multi-Browser-Support umzugehen, ist darum der Einsatz von Feature-Detection. Dabei kann zum Beispiel auf Pointer Events, aber auch auf eine beliebige Eingabemethode – etwa Touch – getestet werden. Auch der Einsatz von Polyfills ist ratsam.
Efficient Transformers
Christoph Henkelmann, DIVISIO
Enhancing Page Visits by Topic Prediction
Dieter Jordens, Continuum Consulting NV
Machine Learning on Edge using TensorFlow
Håkan Silfvernagel, Miles AS
Advanced Web Pentesting
mit Christian Schneider (Schneider IT-Security)
What Star Wars Taught Me About Secure System Design
mit Anne Oikarinen (Nixu Corporation)
Einfache Gesten erkennen
Doch nicht nur der Umgang mit Multi-Touch spielt bei der richtigen Nutzung von Pointer Events eine Rolle, es ist genauso wichtig, sich mit der Umsetzung von typischen Touch-Gesten zu beschäftigen. Als Basis dient dabei die Registrierung für pointerdown. Innerhalb des entsprechenden Handlers muss ausgewählt werden, welche Pointer übertragen werden sollen, um eine bestimmte Geste zu entdecken.
Wie man bei der Umsetzung vorgehen sollte, zeigt Rousset anhand von verschiedenen Beispielen, die in oben genanntem Artikel ausführlich vorgestellt werden. Dabei wird deutlich, dass Pointer Events zahlreiche nützliche Funktionalitäten bieten, die sich leicht in die eigenen Website implementieren lassen um so den Usern eine bessere User Experience zu bescheren – egal, ob sie mit Stift, Maus oder über Touch auf der Seite unterwegs sind.
Webperformance und Page Speed 2021
mit Sven Wolfermann (maddesigns)
UX Design: Kitsch – du willst es doch auch!
mit Lutz Schmitt (Lutz Schmitt Design & Consulting)
SEO loves PR: Wie zwei Disziplinen gemeinsam erfolgreich sein können
mit Anne Kiefer (sexeedo GmbH)
Advanced Web Pentesting
mit Christian Schneider (Schneider IT-Security)
What Star Wars Taught Me About Secure System Design
mit Anne Oikarinen (Nixu Corporation)
Aufmacherbild: blue foam finger on white background von Shutterstock / Urheberrecht: Hurst Photo
