JavaScript/DOM/Event/Pointer Events

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Event
Wechseln zu: Navigation, Suche

Dieser Artikel behandelt die Pointer Event API. Sie ist nicht zu verwechseln mit der geichnamigen CSS-Eigenschaft pointer-events.


Heutzutage gibt es mittlerweile viele Geräte, die nicht nur mit der Maus und der Tastatur, sondern auch durch Touchscreens oder Stift gesteuert werden.

Dies bedingt eine Einbindung vieler verschiedenen Event-Abfragen, die dadurch erschwert wird, dass z.B. Touch-Geräte, um rein maus-basierte, ältere Webseiten nicht auszuschließen, sowohl Touch-Events als auch Maus-Events auslösen. So ist eine genaue Abfrage von Events oft unmöglich.

Um die Ereignisbehandlung für eine Vielzahl von Eingabegeräten zu vereinfachen, werden Pointer Events definiert. Ein Pointer (engl. für Zeiger) kann jeder Kontakt auf einer Eingabefläche sein: Mauscursor, Stift, Berührung und andere Zeigegeräte.

  • Chrome
  • Leer
  • IE 11
  • Opera
  • Leer

Details: caniuse.com

Folgende Pointer Events existieren:

Click-Verzögerung auf mobilen Geräten[Bearbeiten]

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

Beispiel: Anbinden mehrerer Events
function tuWas(event) {
  // Ausgabe in die Konsole, zur Überprüfung, welche und wieviele Events gefeuert werden:
  console.log("Event-Typ: " + event.type);
}

var elem  = document.getElementById ('button');
elem.addEventListener ('pointerdown', tuWas);
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 pointerdown-, dann das touchstart- und schließllich für ältere Browser das click-Event dynamisch mittels addEventListener angebunden. Bei einem Click, Tap oder Stiftberührung wird die Funktion tuWas aufgerufen. Dabei kann es geschehen, dass mehrere Events gefeuert werden.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]