CSS, HTML und Javascript mit {stil}

Touch Events

Touch-Screens übersetzen click-Events in touch-Events

Touch-Events emmulieren die Maus auf mobilen Geräten mit Touchscreen und sind ein Äquivalent zu den Click-Events der Maus – wenn auch mit Einschränkungen.

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 Tabletts und Handys genauso funktionieren wie beim Desktop auf die 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

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

touch verus 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 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 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 meisten mobilen Browser – insbesondere Chrome und Safari - keine 300ms Verzögerung mehr.

Quelle: ftlabs/fastclick Polyfill to remove click delays on browsers with touch UIs

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
Ob die CTRL-Taste gedrückt wurde
metaKey
Ob die META-Taste gedrückt wurde
shiftKey
Ob die 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
Die x-Koordinate des Events
screenY
Die y-Koordinate des Events
clientX
Die x-Koordinate des Events relativ zum Viewport des Fensters
clientY
Die 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:



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

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.

Koordinaten bei touchmove-Events

Beim Swipe wird der Finger ü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 als ein einfacher 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).

touchstart, touchmove und touchend tracken die Bewegung des Fingers auf dem Touchscreen.

TOUCH and MOVE!


var startmove = document.querySelector('.startmove');
var moves = document.getElementById('moves');
var startx = 0;
var starty = 0;
var dist = 0;

startmove ist das HTML-Element, auf dem die Bewegung des Fingers beginnt. moves ist nur ein Element zur Ausgabe der Statusmeldungen.

Um die Bewegung des Fingers auf dem Touchscreen zu verfolgen, werden drei Event-Listener gebraucht: touchstart, touchmove und touchend.

startmove.addEventListener("touchstart", function(eve){
   var touchobj = eve.changedTouches[0]; // erster Finger
   startx = parseInt(touchobj.clientX); // X/Y-Koordinaten relativ zum Viewport
   starty = parseInt(touchobj.clientY);
   moves.innerHTML = "touchstart bei ClientX: " + startx + "px ClientY: " + starty + "px";
   eve.preventDefault();
});

eve.changedTouches[0] liefert die Informationen zum Finger und seiner Position am Anfang der Bewegung.

startmove.addEventListener("touchmove", function(eve){
   var touchobj = eve.changedTouches[0]; // erster Finger
   var distx = parseInt(touchobj.clientX) - startx;
   var disty = parseInt(touchobj.clientY) - starty;
   moves.innerHTML = "touchmove horizontal: " + distx + "px vertikal: " + disty + "px";  
   eve.preventDefault();
});

startmove.addEventListener("touchend", function(eve){
   var touchobj = eve.changedTouches[0]; // reference first touch point for this event
   moves.innerHTML = "touchend bei X-Koordinate: " + touchobj.clientX + "px Y-Koordinate: " + touchobj.clientY + "px";
   eve.preventDefault();
});

jQuery hingegen bietet ein fertiges Swipe.

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

jQuery mobile Swipe

Swipe mit oder ohne jQuery: HAMMER.JS ist eine solide kleine Library (7.34 kB minified + gzipped), die Touch-Gesten unterstützt und darüber hinaus die kleine Verzögerung von 300ms bei Klicks eliminiert. HAMMER.JS entdeckt rotate, pinch, pres, pan, tap und swipe-Gesten.

Touch Actions mit CSS

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

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 noch mangelt es am flächendeckenden Browser-Support.

CLICK ME TOUCH ME