Javascript Touch Events für Smartphones und Tabletts

Touch-Events vs. Mouse-Events

Click-Events reagieren auch auf dem Touchscreen auf die Berührung des Fingers, denn so erwarten wir das: Ein Link und das Absenden eines Formulars müssen auf Tabletts und Handys genauso funktionieren wie beim Desktop mit der Maus.

In den meisten Fällen müsste also kein gesondertes Touch-Event für mobile Geräte einsetzt werden. Dennoch macht es Sinn, Maus Events genauer zu betrachten und durch Touch-Events zu ersetzen, denn Touch-Events sind komplexer als Klicks.

touchstart	↔ mousedown
touchmove	↔ mousemove
touchend	↔ mouseup
touchcancel

touchcancel feuert z.B., wenn der Benutzer den Finger in eine Region außerhalb des Viewports zieht – etwa in die Navigationsleiste.

touch vs. click

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

Das blaue Feld ist mit einem Touch-Event belegt, das grüne 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 grüne 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!';
}

Seit Ende 2015 zeigen die mobilen Browser keine 300ms Verzögerung mehr (auch wenn die 300ms immer noch durchs Web schwirren ).

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.

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.

Das touchstart Event ist auf Android, iPhone und iPad einen Tick schneller als Mouse-Events, denn bei einem Touch muss der Browser nicht abwarten, ob eine Geste z.B. ein Vergrößern auslösen soll.

Touch Events vs Mouse Events

Ein touchstart-Event reagiert so schnell, das 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.

Das mousemove-Event erzeugt kein Touch-Event. Touch-Events behandeln das Element, auf dem das Touch stattfindet, mousemove behandelt das Element unter dem Mauszeiger. Es gibt kein Äquivalent zu mouseover und mouseout, sondern nur touchend.

Informationen zu touch-Events

altKey: Ob die ALT-Taste gedrückt wurde
canBubble: Ob das Event nach oben steigen kann – bubble.
cancelable: Ob die vorgegebene Aktion des Events verhindert werden kann.
changedTouches: Liste aller Finger, die am aktuellen Event beteiligt sind:
Beim touchstart eine Liste der Finger
beim touchmove eine Liste der Finger, die sich bewegt haben
beim touchend eine Liste der Finger, die die Touchoberfläche verlassen haben
length gibt die Anzahl der Finger zurück
ctrlKey / metaKey / shiftKey: Ob die CTRL- / META- / SHIFT-Taste gedrückt wurde
targetTouches: Alle Touch-Ziele, die zu diesem Event gehören
touches: Eine Liste aller Finger, die momentan auf der Touchoberfläche liegen
detail: Weitere Informationen zum Event.
screenX / screenY: Die x-Koordinate / y-Koordinate des Events
clientX / clientY: Die x-Koordinate / y-Koordinate des Events relativ zum Viewport des Fensters
type: Der Typ des Ereignisses
view: Der Viewport (DOM window), in dem das Event aufgetreten ist.
scale: Der 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

Die drei Listen changedTouches, targetTouches und touches enthalten weitere Informationen zum jeweiligen Touch-Event:

identifier, die Nummer für einen Finger in einer Touch-Session
target, Ziel der Aktion (das Element, auf dem das Event ausgelöst wurde)
client-, page- und screen-Koordinaten der Aktion
radius-Koordinaten und rotatationAngle

Touch-Events tracken

Koordinaten eines einfachen Touch-Events: Koordinaten relativ zur Testfläche, zweite Zeile relativ zum Dokument.

touchsquare.addEventListener ("touch", function (eve) {
	eve.preventDefault();
	const  dim = touchsquare.getBoundingClientRect();
	const  posx = event.clientX - dim.left;
	const  posy = event.clientY - dim.top;
		
	circle.setAttribute("cx",posx);
	circle.setAttribute("cy",posy);
	document.querySelector(".conso").innerHTML =  `${posx} ${posy}  <br> ${dim.left}  ${dim.top}`;
});

eve.preventDefault () innerhalb des Event Handlers verhindert, dass Mouse-Events für den Touch erzeugt werden. Das ist eine der wichtigsten Regeln für die Behandlung von Touch-Events:

preventDefault () aufrufen, damit keine Emulation der Maus zustande kommt!

Darum muss die Event-behandelnde Funktion mit dem Event als Argument aufgerufen werden.

Swipe-Events gibts nicht

Swipe-Gesten oder Wischen auf dem Touchscreen werden durch Touch-Events umgesetzt. Zwar hat jQuery ein swipe-Event, aber Vanilla Javascript muss touchstart, touchmove und touchend einsetzen und die Koordinaten abfragen, um ein Swipe einzusetzen.

Touch Actions mit CSS: Bild zoomen auf Touchscreens

Bei Animationen vermissen wir eine Umsetzung von :hover für Touchscreens.

.zoomIn {
	transform: scale(2);
	transition: 1s
}

garn-und-scheren — Bild zoomen als reines Touch-Event

const zoomin = document.querySelector (".zoomin");
zoomin.ontouchstart = function (eve) {
	this.classList.add ("zoomIn");
	eve.preventDefault();
}

zoomin.ontouchend = function () {
	this.classList.toggle ("zoomIn");
}

touchstart und touchend für den Zoom-Effekt reichen nicht. Wenn der Benutzer eine kurze Zeit mit dem Finger auch dem Element verweilt, bieten Geräte mit Touchscreen Aktionen wie »sende per Email«, »Übersetzen« oder »Kopieren« an. event.preventDefault muss diese vorbestimmten Reaktionen unterbinden. Der Benutzer muss auch von der Möglichkeit zu Zoomen unterrichtet werden.

CSS touch action informiert den Browser via CSS über die Aktionen des Benutzers und filtert komplexe Gesten (CSS touch-action demo von Chen Huijing). Das ist schneller als Javascript, aber lange Zeit hat CSS touch-action unter mangelnden Browser-Support gelitten.

iOS (Mobile Safari auf iPhone und iPad) unterstützt CSS touch-action seit Version 10, und immer noch nur eingeschränkt.