Ein Großteil der heutigen Webinhalte geht davon aus, dass das Zeigegerät des Benutzers eine Maus ist. Da jedoch viele Geräte andere Arten von Zeigeeingabegeräten unterstützen, wie Stifte/Stylus oder Touch-Oberflächen, sind Erweiterungen der bestehenden Zeigegeräte-Ereignismodelle notwendig.Zeiger-Ereignisse erfüllen diesen Bedarf.

Zeiger-Ereignisse sind DOM-Ereignisse, die für ein Zeigegerät ausgelöst werden. Sie sind darauf ausgelegt, ein einheitliches DOM-Ereignismodell zu schaffen, das Zeigeeingabegeräte wie Maus, Stift/ Stylus oder Touch unterstützt (z.B. ein oder mehrere Finger).

DerZeiger ist ein hardwareunabhängiges Gerät, das auf ein bestimmtes Set von Bildschirmkoordinaten zielen kann. Ein einheitliches Ereignismodell für Zeiger kann das Erstellen von Websites und Anwendungen vereinfachen und eine gute Benutzererfahrung unabhängig von der Hardware des Benutzers bieten. Für Szenarien, in denen eine gerätespezifische Handhabung gewünscht ist, definiert Zeiger-Ereignisse einepointerType-Eigenschaft, um den Gerätetyp zu überprüfen, der das Ereignis verursacht hat.

Die für die Handhabung allgemeiner Zeigereingaben benötigten Ereignisse sind analog zuMausereignissen (mousedown/pointerdown,mousemove/pointermove usw.). Daher sind Zeiger-Ereignistypen absichtlich den Maustypen ähnlich.

Darüber hinaus enthält ein Zeiger-Ereignis die üblichen Eigenschaften, die in Maus-Ereignissen vorhanden sind (Client-Koordinaten, Ziel-Element, Tastenstatus usw.) sowie neue Eigenschaften für andere Eingabeformen: Druck, Kontaktgeometrie, Neigung usw. Tatsächlich erbt diePointerEvent-Schnittstelle alle Eigenschaften derMouseEvent-Schnittstelle, was die Migration von Inhalten von Maus- zu Zeiger-Ereignissen erleichtert.

Terminologie

Aktiver Tastenstatus

Der Zustand, wenn einZeiger einen nicht-nullwertigenbuttons-Eigenschaftswert hat. Zum Beispiel, bei einem Stift, wenn der Stift physischen Kontakt mit dem Digitalisierer hat oder mindestens eine Taste gedrückt ist, während er schwebt.

Aktiver Zeiger

JedesZeiger Eingabegerät, das Ereignisse erzeugen kann. Ein Zeiger wird als aktiv betrachtet, wenn er weiterhin weitere Ereignisse erzeugen kann. Zum Beispiel gilt ein Stift, der in einem gedrückten Zustand ist, als aktiv, da er zusätzliche Ereignisse erzeugen kann, wenn der Stift angehoben oder bewegt wird.

Digitalisierer

Ein Erfassungsgerät mit einer Oberfläche, die Kontakt erfassen kann. Meistens handelt es sich um einen touchfähigen Bildschirm, der Eingaben von einem Eingabegerät wie einem Stift, Stylus oder Finger erfassen kann. Einige Erfassungsgeräte können die nahe Nähe des Eingabegeräts erkennen, und der Zustand wird als Schwebezustand wie bei der Maus ausgedrückt.

Treffer-Test

Der Prozess, den der Browser verwendet, um ein Ziel-Element für ein Zeiger-Ereignis zu bestimmen. Typischerweise wird dies durch Betrachtung der Position des Zeigers und auch des visuellen Layouts der Elemente im Dokument auf Bildschirmmedien bestimmt.

Zeiger

Eine hardwareunabhängige Darstellung von Eingabegeräten, die auf eine bestimmte Koordinate (oder ein Koordinatenset) auf einem Bildschirm zielen können. Beispiele fürZeiger-Eingabegeräte sind Maus, Stift/Stylus und Touchkontakte.

Zeiger-Erfassung

Die Zeigererfassung ermöglicht, dass die Ereignisse für einen Zeiger auf ein bestimmtes Element umgeleitet werden, anstatt auf das normale Ergebnis eines Treffer-Tests der Zeigerposition. Sehen Sie sichdas Einfangen des Zeigers für ein Beispiel an.

Zeiger-Ereignis

Ein DOM-Ereignis, das für einZeiger ausgelöst wird.

Schnittstellen

Die primäre Schnittstelle ist diePointerEvent-Schnittstelle, die einenKonstruktor plus mehrere Ereignistypen und zugehörige globale Ereignis-Handler hat.

Der Standard umfasst auch einige Erweiterungen derElement- undNavigator-Schnittstellen.

Die folgenden Unterabschnitte enthalten kurze Beschreibungen jeder Schnittstelle und Eigenschaft.

PointerEvent-Schnittstelle

DiePointerEvent-Schnittstelle erweitert dieMouseEvent-Schnittstelle und hat die folgenden Eigenschaften.

altitudeAngleSchreibgeschützt

Repräsentiert den Winkel zwischen einer Wandlerachse (einem Zeiger oder Stylus) und der X-Y-Ebene eines Gerätdisplays.

azimuthAngleSchreibgeschützt

Repräsentiert den Winkel zwischen der Y-Z-Ebene und der Ebene, die sowohl die Wandlerachse (ein Zeiger oder Stylus) als auch die Y-Achse enthält.

PointerEvent.persistentDeviceIdSchreibgeschützt

Eine eindeutige Kennung für das Zeigegerät, das dasPointerEvent erzeugt.

pointerIdSchreibgeschützt

Eine eindeutige Kennung für den Zeiger, der das Ereignis verursacht.

widthSchreibgeschützt

Die Breite (Größe auf der X-Achse) der Kontaktgeometrie des Zeigers in CSS-Pixeln.

heightSchreibgeschützt

Die Höhe (Größe auf der Y-Achse) der Kontaktgeometrie des Zeigers in CSS-Pixeln.

pressureSchreibgeschützt

Der normalisierte Druck der Zeigereingabe im Bereich von0 bis1, wobei0 und1 den minimalen bzw. maximalen Druck darstellen, den die Hardware zu erkennen vermag.

tangentialPressureSchreibgeschützt

Der normalisierte tangentiale Druck der Zeigereingabe (auch bekannt als Fassdruck oder Zylinderstress) im Bereich zwischen-1 bis1, wobei0 die neutrale Position der Kontrolle ist.

tiltXSchreibgeschützt

Der Ebenenwinkel (in Grad, im Bereich von-90 bis90) zwischen der Y–Z-Ebene und der Ebene, die sowohl die Zeigerachse (z.B. Pen Stylus) als auch die Y-Achse enthält.

tiltYSchreibgeschützt

Der Ebenenwinkel (in Grad, im Bereich von-90 bis90) zwischen der X–Z-Ebene und der Ebene, die sowohl die Zeigerachse (z.B. Pen Stylus) als auch die X-Achse enthält.

twistSchreibgeschützt

Die Drehung des Zeigers (z.B. Pen Stylus) im Uhrzeigersinn um seine Hauptachse in Grad, mit einem Wert im Bereich von0 bis359.

pointerTypeSchreibgeschützt

Gibt den Gerätetyp an, der das Ereignis verursacht hat (Maus, Stift, Touch usw.).

isPrimarySchreibgeschützt

Gibt an, ob der Zeiger den primären Zeiger dieses Zeigertyps darstellt.

Ereignistypen und globale Ereignis-Handler

Zeiger-Ereignisse haben zehn Ereignistypen, von denen sieben ähnliche Semantik wie ihre Maus-Ereignis-Pendants haben (down,up,move,over,out,enter undleave).

Im Folgenden eine kurze Beschreibung jedes Ereignistyps.

Elementerweiterungen

Es gibt drei Erweiterungen derElement-Schnittstelle:

hasPointerCapture()

Gibt an, ob das Element, auf dem es aufgerufen wird, die Zeigererfassung für den durch die gegebene Zeiger-ID identifizierten Zeiger hat.

releasePointerCapture()

Hebt dieZeigererfassung auf, die zuvor für ein bestimmtes Zeiger-Ereignis festgelegt wurde.

setPointerCapture()

Bestimmt ein bestimmtes Element alsErfassungsziel zukünftiger Zeiger-Ereignisse.

Navigator-Erweiterung

DieNavigator.maxTouchPoints-Eigenschaft wird verwendet, um die maximale Anzahl gleichzeitiger Berührungspunkte zu bestimmen, die zu einem bestimmten Zeitpunkt unterstützt werden.

Beispiele

Dieser Abschnitt enthält Beispiele für die grundlegende Verwendung der Zeigerereignisse-Schnittstellen.

Registrieren von Ereignis-Handlern

Dieses Beispiel registriert einen Handler für jeden Ereignistyp für das gegebene Element.

<div>Touch me…</div>

function overHandler(event) {}function enterHandler(event) {}function downHandler(event) {}function moveHandler(event) {}function upHandler(event) {}function cancelHandler(event) {}function outHandler(event) {}function leaveHandler(event) {}function rawUpdateHandler(event) {}function gotCaptureHandler(event) {}function lostCaptureHandler(event) {}const el = document.getElementById("target");// Register pointer event handlersel.onpointerover = overHandler;el.onpointerenter = enterHandler;el.onpointerdown = downHandler;el.onpointermove = moveHandler;el.onpointerup = upHandler;el.onpointercancel = cancelHandler;el.onpointerout = outHandler;el.onpointerleave = leaveHandler;el.onpointerrawupdate = rawUpdateHandler;el.ongotpointercapture = gotCaptureHandler;el.onlostpointercapture = lostCaptureHandler;

Eigenschaften von Ereignissen

Dieses Beispiel zeigt, wie auf alle Eigenschaften eines Zeigerereignisses zugegriffen wird.

<div>Touch me…</div>

const id = -1;function processId(event) {  // Process this event based on the event's identifier}function processMouse(event) {  // Process the mouse pointer event}function processPen(event) {  // Process the pen pointer event}function processTouch(event) {  // Process the touch pointer event}function processTilt(tiltX, tiltY) {  // Tilt data handler}function processPressure(pressure) {  // Pressure handler}function processNonPrimary(event) {  // Non primary handler}function downHandler(ev) {  // Calculate the touch point's contact area  const area = ev.width * ev.height;  // Compare cached id with this event's id and process accordingly  if (id === ev.identifier) processId(ev);  // Call the appropriate pointer type handler  switch (ev.pointerType) {    case "mouse":      processMouse(ev);      break;    case "pen":      processPen(ev);      break;    case "touch":      processTouch(ev);      break;    default:      console.log(`pointerType ${ev.pointerType} is not supported`);  }  // Call the tilt handler  if (ev.tiltX !== 0 && ev.tiltY !== 0) processTilt(ev.tiltX, ev.tiltY);  // Call the pressure handler  processPressure(ev.pressure);  // If this event is not primary, call the non primary handler  if (!ev.isPrimary) processNonPrimary(ev);}const el = document.getElementById("target");// Register pointerdown handlerel.onpointerdown = downHandler;

Bestimmen des primären Zeigers

In einigen Szenarien kann es mehrere Zeiger geben (zum Beispiel ein Gerät mit sowohl Touchscreen als auch Maus) oder einen Zeiger, der mehrere Kontaktpunkte unterstützt (zum Beispiel einen Touchscreen, der mehrere Fingertipps unterstützt). Die Anwendung kann dieisPrimary-Eigenschaft verwenden, um einen Hauptzeiger unter der Menge deraktiven Zeiger für jeden Zeigertyp zu identifizieren. Wenn eine Anwendung nur einen primären Zeiger unterstützen möchte, kann sie alle Zeigerereignisse ignorieren, die nicht primär sind.

Eine Maus hat nur einen Zeiger, also wird dieser immer der primäre Zeiger sein. Für Touch-Eingaben wird ein Zeiger als primär betrachtet, wenn der Benutzer den Bildschirm berührt hat, als es keine anderen aktiven Berührungen gab. Für Stift- und Stylus-Eingaben wird ein Zeiger als primär betrachtet, wenn der Stift des Benutzers den Bildschirm initial berührt hat, während keine anderen aktiven Stifte den Bildschirm berührten.

Bestimmen der Tastenstatus

Einige Zeigegeräte (wie Maus und Stift) unterstützen mehrere Tasten, und die Tastenbetätigungen könnenüberlagert sein (d.h. eine zusätzliche Taste wird gedrückt, während eine andere Taste am Zeigegerät bereits gedrückt ist).

Um den Zustand der Tastenbetätigungen zu bestimmen, verwenden Zeiger-Ereignisse diebutton- undbuttons-Eigenschaften derMouseEvent-Schnittstelle (von derPointerEvent erbt).

Die folgende Tabelle liefert die Werte vonbutton undbuttons für die verschiedenen Gerätezustände der Tasten.

Erfassen des Zeigers

Die Zeiger-Erfassung ermöglicht, dass Ereignisse für ein bestimmtesZeiger-Ereignis auf ein bestimmtes Element umgeleitet werden, anstatt dem normalenTreffer-Test an der Position des Zeigers zu folgen. Dies kann verwendet werden, um sicherzustellen, dass ein Element weiterhin Zeigerereignisse empfängt, auch wenn der Kontakt des Zeigegeräts das Element verlässt (zum Beispiel durch Scrollen oder Panning).

Die Zeigererfassung sorgt dafür, dass das Ziel alle nachfolgenden Zeigerereignisse erfasst, als ob sie über dem erfassenden Ziel stattfinden würden. Folglich werdenpointerover,pointerenter,pointerleave undpointeroutnicht ausgelöst, solange diese Erfassung gesetzt ist.Für Browser mit Touchscreens, diedirekte Manipulation zulassen, wird eineimplizite Zeigererfassung auf dem Element aufgerufen, wenn einpointerdown-Ereignis ausgelöst wird. Die Erfassung kann manuell aufgehoben werden, indemelement.releasePointerCapture auf das Ziel-Element aufgerufen wird, oder sie wird implizit nach einempointerup- oderpointercancel-Ereignis freigegeben.

Das folgende Beispiel zeigt, wie die Zeigererfassung auf ein Element gesetzt wird.

<div>Touch me…</div>

function downHandler(ev) {  const el = document.getElementById("target");  // Element 'target' will receive/capture further events  el.setPointerCapture(ev.pointerId);}const el = document.getElementById("target");el.onpointerdown = downHandler;

Das folgende Beispiel zeigt, wie eine Zeigererfassung freigegeben wird (wenn einpointercancel-Ereignis eintritt. Der Browser erledigt dies automatisch, wenn einpointerup- oderpointercancel-Ereignis auftritt.

<div>Touch me…</div>

function downHandler(ev) {  const el = document.getElementById("target");  // Element "target" will receive/capture further events  el.setPointerCapture(ev.pointerId);}function cancelHandler(ev) {  const el = document.getElementById("target");  // Release the pointer capture  el.releasePointerCapture(ev.pointerId);}const el = document.getElementById("target");// Register pointerdown and pointercancel handlersel.onpointerdown = downHandler;el.onpointercancel = cancelHandler;

touch-action CSS-Eigenschaft

Dietouch-action CSS-Eigenschaft wird verwendet, um anzugeben, ob der Browser sein Standardverhalten (nativ) bei Berührung (wie Zoomen oder Panning) auf eine Region anwenden soll oder nicht. Diese Eigenschaft kann auf alle Elemente angewendet werden, außer: nicht ersetzte Inline-Elemente, Tabellenzeilen, Zeilengruppen, Tabellenspalten und Spaltengruppen.

Ein Wert vonauto bedeutet, dass der Browser frei ist, sein Standard-Touch-Verhalten (auf die angegebene Region) anzuwenden, und der Wertnone deaktiviert das Standard-Touch-Verhalten des Browsers für die Region. Die Wertepan-x undpan-y bedeuten, dass Berührungen, die auf der angegebenen Region beginnen, nur horizontal bzw. vertikal scrollen sollen. Der Wertmanipulation bedeutet, dass der Browser Berührungen, die auf dem Element beginnen, nur zum Scrollen und Zoomen in Betracht ziehen darf.

Im folgenden Beispiel ist das Standard-Touch-Verhalten für einigebutton-Elemente deaktiviert.

button#tiny {  touch-action: none;}

Im folgenden Beispiel wird dastarget-Element, wenn es berührt wird, nur in der horizontalen Richtung verschoben.

#target {  touch-action: pan-x;}

Kompatibilität mit Mausereignissen

Obwohl die Zeiger-Ereignis-Schnittstellen Anwendungen ermöglichen, verbesserte Benutzererfahrungen auf zeigerfähigen Geräten zu schaffen, ist die Realität, dass der Großteil der heutigen Webinhalte nur auf Maus-Eingaben ausgelegt ist. Folglich muss ein Browser, selbst wenn er Zeiger-Ereignisse unterstützt, weiterhin Mausereignisse verarbeiten, damit Inhalte, die nur Maus-Eingaben voraussetzen, ohne direkte Anpassung funktionieren. Idealerweise muss eine zeigerfähige Anwendung nicht explizit mit Maus-Eingaben umgehen. Da jedoch der Browser Mausereignisse verarbeiten muss, kann es einige Kompatibilitätsprobleme geben, die angesprochen werden müssen. Dieser Abschnitt enthält Informationen über die Interaktion von Zeiger- und Mausereignissen und deren Auswirkungen für Anwendungsentwickler.

Der Browserkann generische Zeigereingaben Ereignisse auf Mausereignisse abbilden, um Kompatibilität mit mausbasierter Inhalte zu gewährleisten. Diese Zuordnung von Ereignissen wird alsMauskompatibilitätsereignisse bezeichnet. Autoren können die Erzeugung bestimmter Mauskompatibilitätsereignisse verhindern, indem sie das pointerdown-Ereignis abbrechen, aber beachten Sie:

• Mausereignisse können nur verhindert werden, wenn der Zeiger unten ist.
• Schwebende Zeiger (z.B. eine Maus ohne gedrückte Tasten) können ihre Mausereignisse nicht verhindern.
• Die Ereignissemouseover,mouseout,mouseenter undmouseleave werden niemals verhindert (selbst wenn der Zeiger unten ist).

Beste Praktiken

Hier sind einigebeste Praktiken, die bei der Verwendung von Zeiger-Ereignissen zu beachten sind:

• Minimieren Sie die Menge an Arbeit, die in Ereignis-Handlern durchgeführt wird.
• Fügen Sie die Ereignis-Handler einem spezifischen Ziel-Element (statt des gesamten Dokuments oder Knoten weiter oben im Dokumentbaum) hinzu.
• Das Ziel-Element (Knoten) sollte groß genug sein, um den größten Kontaktflächenbereich (typischerweise eine Fingerberührung) aufzunehmen. Wenn das Zielgebiet zu klein ist, könnte das Berühren dazu führen, dass andere Ereignisse für benachbarte Elemente ausgelöst werden.

Spezifikationen

Browser-Kompatibilität

Einige zusätzliche Werte sind für die CSS-touch-action-Eigenschaft als Teil derPointer Events-Spezifikation definiert, aber derzeit haben diese Werte begrenzte Implementierungsunterstützung.

Siehe auch

• Touch-Ereignisse
• Pointer Events Working Group
• Mail-Liste
• W3C #pointerevents IRC-Kanal
• Touch-/Zeiger-Tests und Demos von Patrick H. Lauke