Touch Events richtig anwenden
In Desktop-Browsern werden üblicherweise Aktionen durch einen Maus-Klick ausgelöst. Steht ein Touchscreen zur Verfügung, z.B. bei Smartphones oder Tablets, kann hierzu auch die Berührung des Bildschirmes genügen. Da aber ein Anwender sein Tablet sowohl über den Touchscreen, als auch über eine angeschlossene Maus bedienen kann, muss man in bestimmten Situationen auf beide Events korrekt reagieren. Dabei kann es zu unschönen Nebeneffekten kommen, die es gilt zu vermeiden.
Reihenfolge der Event-Abarbeitung
Folgende Events stehen bei Geräten mit iOS-Betriebssystem (Apple) oder Android-Betriebssystem zur Verfügung und werden wie folgt abgearbeitet:
- touchstart
- touchmove
- touchend
- mouseover
- mousemove
- mousedown
- mouseup
- click
Durch die Auswahl des richtigen Events können Sie entscheiden, ob eine Aktion sofort bei der kleinsten Berührung ausgelöst wird (touchstart) oder einen nachhaltigen Druck erfordert (z.B. mousedown). Je nach Browsertyp kann zwischen diesen beiden Events ein Zeitraum von ca. einer halben Sekunde liegen. Bei Nutzung eines „späten“ Events haben Sie zwar die Sicherheit, dass durch eine kurze versehendliche Berührung nicht sofort Aktionen ausgelöst werden. Andererseits erwartet man z.B. bei Menüaktionen, dass das Menü sofort ausklappt und nicht erst ein längerer Druck erforderlich ist. Das trägt einfach zum flüssigeren Surfen bei und ist angenehmer.
Korrekte Reaktion auf Touch und Mouse-Events
Sie können aber Aktionen, wie z.B. das Ausklappen eines Menüs, nicht nur an den „frühen“ touchstart Event binden. Wenn ein Anwender an seinem Tablet Maus und Tastatur angeschlossen hat und diese auch verwendet, löst er evtl. nur die Mouse-Events aus, obwohl sie durch Feature-Detection erkannt haben, dass das Gerät Touch-Events unterstützt. Deshalb müssen Sie in dieser Situation in der Lage sein, auf beide Events zu reagieren.
Dabei wird immer die gesamte Event-Kette durchlaufen. Wenn Sie ein Menü toggeln (d.h. ausklappen bei erster Berührung, einklappen bei nochmaliger Berührung), so würde das Menü bei einem längeren Druck per touchstart Event geöffnet und mit nachfolgendem mousedown oder click Event sofort wieder geschlossen. Um diesen unschönen Nebeneffekt zu verhindern, müssen Sie Vorkehrungen treffen, damit die Aktion nur einmal ausgeführt wird.
Scriptbeispiel, um doppelte Aktionen bei Events zu verhindern
Dieses Scriptbeispiel basiert auf jQuery als Framework.
if (isTouchSupported) {
$('#menu-icon').bind('touchstart mousedown', clickMenuEvent);
} else {
$('#menu-icon').bind('mousedown', clickMenuEvent);
}
var lastEvent = false;
function clickMenuEvent1(event) {
if (event.type == 'mousedown' && lastEvent == 'touchstart') {
return false;
}
if($('#menu-icon').hasClass("active")) {
$("#nav").slideUp();
} else {
$("#nav").slideDown();
}
$(this).toggleClass("active");
lastEvent = event.type; // merken des letzten Events für 2. Aufruf
}
Erläuterung:
Nach erfolgter Prüfung (Feature Detection), ob das Gerät Touch-Events unterstützt, werden je nach Ergebnis nur der mousedown Event
oder sowohl touchstart als auch der mousedown Event gebunden.
Wird der touchstart Event gefeuert, so wird die dazugehörige Programmlogik abgearbeitet. Es wird sich dieser Event gemerkt.
Folgt danach der mousedown Event, so wird geprüft, ob die Logik bereits per touchstart ausgeführt wurde. Wenn ja, wird die Logik nicht nochmals ausgeführt.
Events in Aktion
Das hier beschriebene Beispiel kann über die folgenden Link getestet und herunter geladen werden. Das linke Menü (Menü 1) ist mit der soeben beschriebenen Logik versehen. Das rechte Menü (Menü 2) reagiert herkömmlich. Es versteht sich von selbst, dass das Beispiel nur seine volle Funktionalität entfaltet, wenn die Menüs über einen Touchscreen gesteuert werden.
