Touchscreen-Gesten
Die Browser auf Touchscreens erzeugen bei einem Touch eine schnelle Folge von synthetischen Mouse-Events:
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ührte früher zu einer kleinen Verzögerung, denn der Browser wartete 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 vermittelten 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.
Das kleine Zeichenbrett (HTML canvas) behandelt Mouse-Events und Touch-Events getrennt.
canvas.addEventListener('mousedown', sketchMouseDown);
canvas.addEventListener('mousemove', sketchMouseMove);
window.addEventListener('mouseup', sketchMouseUp);
canvas.addEventListener('touchstart', sketchpadTouchStart);
canvas.addEventListener('touchmove', sketchpadTouchMove);
Touchevents
Touchevents wurde von Safari für iOS 2 eingeführt, von den anderen Browsern übernommen und vom W3C nachträglich standardisiert.
Die ersten drei sind äquivalent zu mousedown-, mousemove- und mouseup-Events. touchcancel 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:
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.
