JavaScript/DOM/Event/Touch Events

Das Touch Events Interface ermöglicht es auf berührungssensitiven Touchscreens Ereignisse abzufragen. Touch Events ähneln Maus-Events, unterstützen aber auch gleichzeitige Berührungen auf der Oberfläche. Alle Touchpunkte werden in Bezug auf die Position relativ zum Viewport analysiert, um bewusstes Antippen und Wischgesten von zufälligen Berührungen beim Festhalten zu unterscheiden.

Details: caniuse.com

• touchcancel (Abbruch der Berührung ↔ mouseout)
• touchend (Ende der Berührung ↔ mouseup)
• touchmove (Wischen ↔ mousemove)
• touchstart (Beginn der Berührung ↔ mousedown)

Alle Browser unterstützen eine weiter gefasste Pointer Events Schnittstelle (Zeigereignisse), die neben Mauscursor und Berührungen auch die Bedienung durch Tastatur, Stifte und andere Zeigegeräte umfasst

Click-Verzögerung auf mobilen Geräten

Auf mobilen Touch-Geräten werden click-Events erst nach 300ms Verzögerung gefeuert, um zufällige Berührungen auszuschließen.

Anbinden mehrerer Events

function tuWas() {
  alert ('Event-Handler wurden hinzugefügt!');
}

var elem  = document.getElementById ('button');
elem.addEventListener ('touchstart', tuWas);
elem.addEventListener ('click', tuWas);

Um bei Touchgeräten die Verzögerung auszuschließen werden hier mehrere Events vom Button abgefragt. Zuerst wird ein touchstart-, dann das click-Event dynamisch mittels addEventListener angebunden. Bei einem Click oder Tap wird die Funktion tuWas aufgerufen.

Siehe auch

• JavaScript/Tutorials/Mouse and More (Eventverarbeitung mit Maus, Touch oder Stift)

Weblinks

• W3C: Touch Interface

• Mediaevent:Touch-Events
• smashingmagazine: Better Browser Input-Events