Pointer Event sollen Multi-Touch-Events im Web vereinheitlichen

Pointer Events: was können sie und wie nutzt man sie richtig?
Keine Kommentare

Es gibt immer mehr Devices, die auf Touch-Input reagieren, seien es Smartphones, Tablets oder Wearables wie etwa Smartwatches. Kein Wunder, dass sich viele Entwickler da die Frage stellen, wo sie überhaupt anfangen sollen, wenn sie für solche Touch-optimierten Geräte entwickeln und was der einfachste Weg dabei ist. Die Antwort darauf ist jedoch so wenig überraschend, wie unbefriedigend: es ist komplex.

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.

ML Conference 2021

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

 

Software Architecture Camp

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.

webinale – the holistic web conference

Webperformance und Page Speed 2021

mit Sven Wolfermann (maddesigns)

UX Design: Kitsch – du willst es doch auch!

mit Lutz Schmitt (Lutz Schmitt Design & Consulting)

 

Software Architecture Camp

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

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -