CSS, HTML und Javascript mit {stil}

Touchscreens und Touch-Events

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

Die meisten Elemente einer Webseite funktionieren ohne besondere Rücksicht auf Touchscreens, allen voran die klassischen Mouse-Events. Die Touchscreens von Handys und Tabletts bringen allerdings zusätzliche Elemente für Aktionen des Benutzers.

Die Browser auf Touchscreens erzeugen bei einem Touch eine schnelle Folge von synthetischen Mouse-Events:

mouseover mousemove mousedown mouseup click

Touchscreen-Gesten

Am Rechner gibt es nur einen einzigen Mauszeiger, aber der Benutzer kann seinen Screen mit mehr als einem Finger gleichzeitig berühren – z.B. um einen Bereich durch eine Geste zu vergrößern. Ein schnelles doppeltes Tappen mit dem Finger wird zum Zoomen eines Bereichs eingesetzt, darum wartet der Browser einen Augenblick (im Nanosekundenbereich), ob nicht doch noch eine komplexere Geste beginnt, bevor das Click-Event auf einem Touchscreen feuert.

Touch-zu-Klick-Verzögerung

Das führt in älteren Browsern zu einer kleinen Verzögerung, denn der Browser wartet beim Touch rund 300 ms, bevor das Click-Event auslöst: In dieser Zeit könnte der Benutzer doppelt tippen (z.B. zum Zoomen). Dadurch vermitteln Webseiten ein leichtes Trägheitsgefühl gegenüber nativen Apps.

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

<meta name="viewport" content="width=device-width">

Mousemove zu Scroll

Die synthetischen Mouse-Events feuern auch immer ein einzelnes mousemove-Event. Wenn der Finger sich allerdings sehr weit bewegt, wird kein mousemove-Event erzeugt, denn der Browser interpretiert größere Bewegungen des Finger als Scrollen.

Für Anwendungen mit einem großen Anteil auf Mausbewegungen (z.B. Zeichnen oder Spiele) reicht das normale mousemove nicht – die Bewegung des Fingers oder Stifts auf dem Touchscreen wird nicht in mousemove-Events übersetzt.

Touchevents

Touchevents wurde von Safari für iOS 2 eingeführt, von den anderen Browsern übernommen und vom W3C nachträglich standardisiert.

touchstart touchmove touchend touchcancel

Die ersten drei sind äquivalent zu mousedown-, mousemove- und mouseup-Events. touchcancelt feuert z.B., wenn der Benutzer den Finger in eine Region außerhalb des Viewports zieht – etwa in die Navigationsleiste.

Die Bewegung des Fingers führt zu den folgenden Events:

touchstart > [ touchmove ]+ > touchend > mouseover > (ein einzelnes) mousemove > mousedown > mouseup > click

Am Ende der touch-Sequenz erzeugt der Browser also noch die synthetischen Maus-Events.

Support für Touchevents abfragen

Um festzustellen, ob der Browser auf Touchevents reagiert:

if ("ontouchstart" in window) {
/* Browser mit Touch-Event-Support */
}

Das funktioniert zuverlässig in den modernen Browsern. Wenn ältere Browser unterstützt werden sollen, nimmt man besser Modernizr zur Hilfe.

touch-actions