CSS, HTML und Javascript mit {stil}

Touch Events

click-me-touch-me

touch-Events emmulieren die Maus auf mobilen Geräten mit Touchscreen und sind das Äquivalent zu den click-Events der Maus.

Click-Events reagieren auch auf die Berührung des Fingers, denn so erwarten wir das: Ein Link und das Absenden eines Formulars müssen auf dem Tablett und dem Smartphone genauso auf den Finger reagieren, wie am Desktop auf die Maus.

In den meisten Anwendungen muss also kein gesondertes touch-Event für mobile Geräte einsetzt werden. Bei Anwendungen für mobile Geräte macht es Sinn, Maus-Events genauer zu betrachten und durch touch-Events zu ersetzen.

touchstart↔ mousedown
touchend↔ mouseup
touchmove↔ mousemove
touchcancel

touch verus click

Das click-Event ist das meistgenutzte Event – vor allem für die beliebten Lightboxen. Aber wenn die Maus auf ein Element geklickt wird, dann entsteht eine winzige Verzögerung, denn das Ereignis kann durch das Zurückziehen der Maus gecancelt werden.

Das blaue Feld ist mit einem touch-Event belegt, das rote Feld mit einem Click-Event. Die linke blaue Box reagiert nicht auf ein Click, aber beide Felder reagieren auf die Berührung mit dem Finger.

Den Unterschied zwischen dem click-Event und dem touch-Event kann man ertasten: Ein touch mit dem Finger auf das blaue Element erzeugt das Ereignis ohne jegliche Verzögerung. Die rote Box hingegen reagiert erst, wenn der Finger nach der Berühung wieder hochgenommen wird.

document.getElementById('firstc').ontouchstart = function (eve) {
	this.innerHTML = 'Touch Down!';
}

document.getElementById('secc').onclick = function (eve) {
	this.innerHTML = 'Clicked!';
}

touchstart versus mousedown

Das touchstart-Event entspricht einem mousedown-Event. Eine Anwendung, die sowohl auf Android, iPad und iPhone (iOS) als auch auf dem Desktop laufen soll, könnte im Grunde genommen mit den wohlbekannten Mouse-Events programmiert werden.

Aber das touchstart-Event ist auf Android, iPhone und iPad einen Tick schneller als Mouse-Events.


Touch Events mit jQuery

Ein touch auf dem Tablett, dem Smartphone oder dem Touch Pad ist aber nicht ohne Weiteres das Äquivalent zum Mausklick: So gibt es z.B. keinen einzelnen Click-Punkt, denn der Finger berührt bei jedem Touch gleich ein ganzes Areal von Punkten.

jQuery UI Touch Punch ist ein kleiners Widget, das die Benutzung der jQuery UI user interface library beim Touch Event ermöglicht: jQuery UI Touch Punch

Swipe-Events

Beim Swipe wird der Finger schnell über die Oberfläche in eine bestimmte Richtung gezogen. Ein onswipe-Event gibt es so in Javascript nicht, dabei ist diese Geste für viele Effekte interessanter und einfacher als ein Touch (z.B. beim Blättern durch einen Slider, in dem die Vorwärts- und Rückwärts-Symbole für kleine Monitore eine Barriere sind).

jQuery hingegen bietet ein fertiges Swipe.

$("#box").on("swipe",function(){
  $(this).hide();
});

Touch Events vs Mouse Events

Ein touchstart-Event reagiert so schnell, dass es auch ein doppeltes Tippen mit dem Finger abfängt. Wenn der Finger nach dem touchstart nicht hochgenommen, sondern bewegt wird, entsteht über das touchstart-Event hinaus ein mousewheel-Event (die Seite oder das Element wird gescrollt).

Insbesondere reagiert das touchstart-Event auf mobilen Geräten schneller als das mousedown-Event, so dass das mousedown-Event beim touchstart gecancelt werden kann. Das macht die Anwendung auf Smartphones und Tabletts mit Touchscreen noch interaktiver für den Benutzer.

Informationen zu touch-Events

altKeyOb die ALT-Taste gedrückt wurde
canBubbleOb das Event nach oben steigen kann – bubble.
cancelableOb die vorgegebene Aktion des Events verhindert werden kann.
changedTouchesAlle Touch-Objekte, die durch dieses Event geändert wurden
ctrlKeyOb die CTRL-Taste gedrückt wurde
metaKeyOb die META-Taste gedrückt wurde
shiftKeyOb die SHIFT-Taste gedrückt wurde
targetTouchesAlle Touch-Ziele, die zu diesem Event gehören
touchesAlle Touch-Objekte, die zu diesem Event gehören
detailWeitere Informationen zum Event.
screenXDie x-Koordinate des Events
screenYDie y-Koordinate des Events
clientXDie x-Koordinate des Events relativ zum Viewport des Fensters
clientYDie y-Koordinate des Events relativ zum Viewport des Fensters
typeDer Typ des Ereignisses
viewDer Viewport (DOM window), in dem das Event aufgetreten ist.
scaleDer Abstand zwischen zwei Fingern seit dem Start des Events. Der Anfangswert ist 1.0. Die Geste für ein Pinch Close (Verkleinern mit zwei Fingern – Herauszoomen) ist ein Wert < 1.0, die Geste für ein Pinch Open (Vergrößern – Zoomen) ist ein Wert > 1.0
rotation Das Delta eines Drehen des Geräts seit dem Start des Events in Grad, positiv bei einer Drehung im Uhrzeigersinn, negativ sonst. Der Anfangswert ist 0.0