Informationen
Das angeforderte Thema wird unten angezeigt. Es ist jedoch nicht in dieser Bibliothek vorhanden.

Zeigerereignisse

Ab Windows 8 unterstützt Internet Explorer W3C-Zeigerereignisse für die Behandlung der Benutzereingabe. Zeigerereignisse werden anhand traditioneller Mausereignisse modelliert, außer dass das Zeigerkonzept abstrahiert und auf alle Benutzereingabemodalitäten angewendet wird, einschließlich Maus, Toucheingabe und Stift. Verwenden Sie Zeigerereignisse, um für verschiedene Eingabemethoden für eine einheitliche Erfahrung zu sorgen, indem Sie das Schreiben in einen einzelnen Satz von Zeigerereignissen durchführen, die hardwareübergreifend verwendet werden können.

Zeigerereignisse und das PointerEvent-Objekt

Das PointerEvent-Objekt erbt von MouseEvent und wird bei ähnlichen Benutzerinteraktionen ausgelöst.

MausereignisEntsprechendes Zeigerereignis
mousedown pointerdown
mouseenter pointerenter
mouseleave pointerleave
mousemove pointermove
mouseout pointerout
mouseover pointerover
mouseup pointerup

 

Das PointerEvent-Objekt stellt die üblichen Eigenschaften bereit, die bei Mausereignissen erwartet werden (z. B. clientX/clientY-Koordinaten, das target-Element und button/buttons-Eigenschaften) sowie diese zusätzlichen Eigenschaften, damit Sie zwischen Eingabetypen und Merkmalen unterscheiden können:

PointerEvent-EigenschaftBeschreibung

height

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

isPrimary

Gibt zurück, ob der Zeiger für das Ereignis der primäre Zeiger für die aktuelle Maus-, Touch- oder Stiftinteraktion ist.

pointerId

Der eindeutige Bezeichner des Kontakts für Touch, Maus oder Stift.

pointerType

Gibt zurück, ob Touch, Stift oder Maus der Ursprung des Ereignisses ist.

pressure

Gibt den normalisierten Druck der Zeigereingabe im Bereich [0,1] zurück, wobei 0 und 1 den minimalen und maximalen Druck darstellen, der von der Hardware gemessen werden kann.

tiltX

Gibt den Winkel zwischen der Y-Z-Ebene und der Ebene, die die Stiftachse und die Y-Achse enthält, im Bereich von -90 und +90 zurück. Eine positive X-Neigung erfolgt auf die rechte Seite.

tiltY

Gibt den Winkel zwischen X-Z-Ebene und der Messwandler-X-Achse zurück. Eine positive Y-Neigung erfolgt zum Benutzer hin.

width

Gibt die Breite (Höhe auf der X-Achse) in CSS-Pixeln der Kontaktgeometrie des Zeigers zurück.

 

Mauskompatibilität

Nach dem Auslösen von Zeigerereignissen löst Internet Explorer Mausereignisse für den ersten Kontakt aus (z. B. den ersten Finger auf dem Bildschirm). Auf diese Weise können bereits vorhandene Websites, die auf Mausereignissen basieren, weiterhin verwendet werden.

Im Gegensatz zur Maus ist es möglich, dass auf dem Bildschirm mehrere Zeiger gleichzeitig vorhanden sind (z. B. bei Hardware mit Multitoucheingabe). In diesem Fall wird für jeden Kontaktpunkt ein eigenes Zeigerereignis ausgelöst, sodass Sites und Apps für die Multitoucheingabe einfacher erstellt werden können.

Featureerkennung und Testen der Touchunterstützung

Mit der PointerEvent-Schnittstelle können Sie die Unterstützung von Zeigerereignissen testen:


if (window.PointerEvent) {
  // Pointer events are supported.
}

Beachten Sie, dass die Featureerkennung für Zeigerereignisse keinen Hinweis darauf liefert, ob das Gerät selbst die Touch- oder Stifteingabe unterstützt. Die PointerEvent-Eigenschaft prüft nur, ob die Plattform unabhängig von der im System vorhandenen Hardware Zeigerereignisse auslöst.

Verwenden Sie die maxTouchPoints-Eigenschaft, um zu testen, ob die Touch- und Multitoucheingabe unterstützt wird:


// Test for touch capable hardware 
if(navigator.maxTouchPoints) { ... }

// Test for multi-touch capable hardware
if(navigator.maxTouchPoints && navigator.maxTouchPoints > 1) { ... }

// Check the maximum number of touch points the hardware supports
var touchPoints = navigator.maxTouchPoints;

Steuern der standardmäßigen Toucheingabebehandlung

Ab Windows 8 unterstützt Internet Explorer die Standardbehandlung gängiger Touchinteraktionen, einschließlich Verschieben von bildlauffähigen Bereichen, Zoomen durch Zusammendrücken und Unterstützung von HTML5-Drag & Drop für die Toucheingabe, die durch eine Benutzerinteraktionssequenz mittels Drücken, Gedrückthalten und Ziehen aktiviert wird. Mithilfe der touch-action-CSS-Eigenschaft können Sie angeben, ob und wie ein bestimmter Seitenbereich per Toucheingabe und mithilfe standardmäßiger Verhaltensweisen für die Toucheingabebehandlung bearbeitet werden kann.

Mit der folgenden Stilregel werden alle standardmäßigen Toucheingabebehandlungen deaktiviert und alle Zeigerereignisse an JavaScript-Code verwiesen:


touch-action: none;

Weitere Informationen finden Sie unter Steuern der standardmäßigen Toucheingabe.

Erfassen von Zeigerereignissen für ein Element

In manchen Fällen ist es hilfreich, einen bestimmten Zeiger einem Element zuzuweisen, um sicherzustellen, dass das Element auch dann noch Zeigerereignisse empfängt, wenn kein Kontakt mehr mit dem Element vorhanden ist.

Wenn beispielsweise eine UI-Taste in Ihrer Web-App berührt und gedrückt gehalten wird und der Finger des Benutzers von der Taste gezogen wird, bevor er angehoben wird (wodurch der Kontakt unterbrochen wird), empfängt die Taste das pointerup-Ereignis möglicherweise nicht. Dadurch könnte die Taste ständig gedrückt bleiben. Durch Zuweisen des Zeigers zum Tastenelement, empfängt die Taste Zeigerereignisse, einschließlich des pointerup-Ereignisses, mit dem der Taste signalisiert wird, den ursprünglichen Zustand wiederherzustellen.

Sie können die setPointerCapture-Methode eines Elementobjekts aufrufen, um diesem Element eine bestimmte pointerId zuzuweisen:


window.addEventListener('pointerdown', pointerdownHandler, false);

function pointerdownHandler (evt) {
      evt.target.setPointerCapture(evt.pointerId);
}

Wenn ein Zeiger für ein Element erfasst wird, empfangen die übergeordneten Elemente und die Vorgängerelemente während der Erfassungs- und Bubblingphase ein gotpointercapture-Ereignis.

Die Erfassung wird freigegeben, wenn der Zeiger entfernt wird (pointerup) oder durch Aufrufe der releasePointerCapture-Methode explizit freigegeben wird. Es gibt auch Fälle, in denen die Erfassung des Elements verloren geht. Wenn beispielsweise die Berührung außerhalb des Fensters erfolgt oder wenn ein anderes Element die Berührung erfasst, geht die Erfassung für das erfasste Element verloren. Das Element, dessen Erfassung verloren ging, empfängt ein lostpointercapture-Ereignis.

Zeigerabbruch

Bei der Verwendung von Finger- oder Stifteingabe können Zeiger auf dem Bildschirm gelegentlich abgebrochen werden. Wenn Ihr Bildschirm beispielsweise nur zwei gleichzeitige Fingereingabepunkte unterstützt und Sie den Bildschirm mit einem dritten Finger berühren, wird einer der anderen Punkte abgebrochen, da die Hardware keine drei Punkte verfolgen kann. Ein Zeigerabbruch ist durch das pointercancel-Ereignis gekennzeichnet. Dies bietet Ihnen die Möglichkeit, erforderliche Bereinigungsarbeiten durchzuführen. Wenn Ihre App beispielsweise eine Zeigerliste verwaltet, können Sie das pointercancel-Ereignis überwachen, damit Sie wissen, wann ein bestimmter Zeiger aus dieser Liste entfernt werden soll.

Hinweise zur Kompatibilität

Um die Candidate Recommendation der W3C-Spezifikation zu Zeigerereignissen zu erfüllen, wurde die Implementierung von Zeigerereignissen bei Internet Explorer 11 im Vergleich zu Internet Explorer 10 geringfügig geändert. Ausführliche Informationen finden Sie unter Updates für Zeigerereignisse im IE-Kompatibilitäts-Cookbook.

Das Hand.JS-JavaScript-Polyfill enthält eine Bibliothek, mit der Sie für verschiedene Browser, die W3C-Zeigerereignisse noch nicht unterstützen, in das Zeigerereignismodell schreiben können. Eine Demo finden Sie unter Erstellen eines universellen virtuellen Touch-Joysticks, der dank "Hand.JS" für alle Touchmodelle geeignet ist.

API-Referenz

PointerEvent

Beispiele und Lernprogramme

Machen Sie Ihre Website bereit für die Toucheingabe
Beispiel für Zeiger und Gesten

Demos für die Internet Explorer-Testversion

Mandelbrot-Explorer
Browseroberfläche
Fingereingabeeffekte
Brick Breaker

IEBlog-Beiträge

W3C-Übergangszeigerereignisse für Candidate Recommendation
Weitere Informationen zu Zeigerereignissen in Verbindung mit dem Last Call-Arbeitsentwurf von W3C
W3C-Arbeitsgruppe für Zeigerereignisse gegründet
Interoperable Zeigerereignisse: Weiterentwickeln von Eingabeereignissen für mehrere Geräte
Richtlinien zum Erstellen von Touchscreen-optimierten Websites
Behandlung von Multitouch- und Mauseingabe in allen Browsern
Toucheingabe für IE10 und Windows Store-Apps

Spezifikation

Spezifikation für Zeigerereignisse

Verwandte Themen

Erstellen eines universellen virtuellen Touch-Joysticks, der dank "Hand.JS" für alle Touchmodelle geeignet ist
Gestikereignisse
Hand.js: Polyfill zur Unterstützung von Zeigerereignissen auf allen Browsern
Bildlauf und Zoomen mit Toucheingabe
Vereinheitlichen von Touch- und Mauseingabe: einfachere browserübergreifende Unterstützung der Toucheingabe dank Zeigerereignissen

 

 

Anzeigen:
© 2014 Microsoft