JavaScript: Touchsupport (Swipe)

In diesem Artikel soll es um meine jüngsten Auseinandersetzungen mit dem Thema Touchsupport bzw. Wischgesten oder auch Swipe gehen. Kurz gesagt JavaScript Swipe. Wenn man seine Webanwendung auf einem Touchgerät im Browser betrachtet, funktionieren zwar grundlegende Wischgesten, aber nur jene, die der Browser als Navigationsfunktion erkennt (z.B. Scrollen). Wer echten Touchsupport in seiner Anwendung unterbringen möchte, kommt um ein bisschen JavaScript nicht herum.

Ausgangslage

Als Ausgangslage dient eine kleine HTML-Seite mit einer externen CSS-Datei:

Der DIV-Container #touchbox stellt den Bereich der Seite dar, der später mit Touchsupport versehen werden soll. Sprich, wenn in diesem Bereich eine Touchbewegung gemacht wird, soll diese erkannt werden.

JavaScript-Datei hinzufügen

In dieser Anleitung möchte ich den JavaScript Code in einer eigenen Datei auslagern. Dies geschieht mit folgendem HTML-Tag vor dem schließenden BODY-Tag:

Touchgeste erkennen in der Theorie

Um eine Touchgeste zu erkennen brauchen wir nicht viel mehr als ein paar Events und ein bisschen Mathematik. Wir müssen den Startpunkt und den Endpunkt der Touchbewegung abfragen und anhand dessen berechnen um was für eine Touchbewegung es sich konkret handelt. Um das etwas genauer zu verdeutlichen, habe ich folgende Infografik entworfen:

JavaScript Swipe im Browser

Die Grafik zeigt eine Touchbewegung auf einem Tablet mit Anfangs- und Endpunkt (siehe Pfeil). Mithilfe der X- und Y-Koordinaten beim Touchstart und beim Touchende können wir berechnen in welche Richtung sich die Touchbewegung ereignet hat. Für eine Bewegung von links nach rechts wird der Wert der X-Koordinate beispielsweise beim Touchstart geringer als beim Touchende sein. Der Wert der Y-Koordinate hingegen sollte sich nur gering verändern (-> Toleranz). Die Toleranz ist wichtig, da ein Mensch aller Wahrscheinlichkeit nach keine 100%ig gerade Touchbewegung machen wird. Allerdings sollte die Toleranz auch nicht zu groß sein, da es sonst eine diagonale oder gar senkrechte Touchbewegung wäre. Als weiterer Faktor ist noch die Distanz und die Zeit der Touchbewegung wichtig. Beides brauchen wir, um sicherzugehen, dass die Touchbewegung bewusst und nicht versehentlich ausgelöst wurde.

JavaScript Code

Nachdem verstanden wurde, was wir zur Bestimmung der Touchgeste brauchen, kann der erste Code geschrieben werden. Als erstes brauchen wir einige Variablen, damit wir einige grundlegende Dinge festlegen können. Außerdem legen wir fest, für welches Element der Seite die Touchbewegung abgefragt werden soll:

Als nächstes brauchen wir Variablen, die den Wert des Touchstartes speichern, damit wir damit beim Touchende rechnen können:

Schließlich können wir unsere Eigenschaften und eine Hilfsfunktion definieren und die Art der Touchbewegung berechnen:

Maussimulation einbauen

Das oben gezeigte Skript funktioniert nur auf Touchgeräten. Wer (testweise) möchte, dass "Touchbewegungen" mit der Maus erkannt werden, kann das Skript wie folgt erweitern:

Um die Maussimulation auszulösen, muss bei gedrückter linker Maustaste die Maus in die gewünschte Richtung bewegt und die linke Maustaste anschließend losgelassen werden.

Feintuning

Leider wird der oben gezeigte Code natürlich auch ausgeführt, wenn eine "echte" Touchgeste zwecks Browsersteuerung (Zoomen, Scrollen) ausgelöst wird. Je nach Anwendung kann man als Lösung oder Workaround folgendes anwenden:

Folgene Zeile im HEAD-Bereich der HTML-Seite hinzufügen, um Zoom auf Touchgeräten komplett zu deaktivieren:

Alternativ lässt sich das JavaScript so erweitern, dass Zoom- und Scrollgesten vom Browser nicht mehr als solche erkannt werden, wenn sich der User im abzufragendem Element befindet:

Komplettes JavaScript

Beitrag kommentieren

Bitte verfasse einen Kommentar.

Dein Kommentar wird vor der Freischaltung von einem Admin moderiert.