Sie befinden sich hier:
» 
» 
08.05.2013

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:

  1. touchstart
  2. touchmove
  3. touchend
  4. mouseover
  5. mousemove
  6. mousedown
  7. mouseup
  8. 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.

  var isTouchSupported = 'ontouchstart' in window;

  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.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

62

Kommentare:

01.August2013

Toller Artikel. Auch die Erklärung der Unterschiede der verschiedenen Events. Werde das in Zukunft berücksichtigen.