Gestikereignisse

Gestikereignisse basieren auf dem W3C-Zeigerereignismodell. Mithilfe von Gestikereignissen können Sie komplexere Touch-basierte Benutzerinteraktionen (z. B. Zusammendrücken, Drehen, Streifen und Ziehen) erkennen und darauf reagieren, ohne einzelne Zeigerereignisse selbst erfassen und interpretieren zu müssen.

Hinweis  Die in diesem Abschnitt behandelten APIs werden unter Windows 7 oder früheren Versionen nicht unterstützt.

Gestikereignisse und das MSGesture-Objekt

Der erste Schritt für die Behandlung von Gesten in Ihrer Website besteht im Instanziieren eines Gestikobjekts.


var myGesture = new MSGesture();

Anschließend weisen Sie der Geste ein Zielelement zu. Dabei handelt es sich um das Element, für das der Browser Gestikereignisse auslöst. Außerdem ist dies das Element, das den Koordinatenbereich für die Ereignisse bestimmt.


elm = document.getElementById("someElement");
myGesture.target = elm;
elm.addEventListener("MSGestureChange", handleGesture);

Schließlich weisen Sie das Gestikobjekt an, welche Zeiger bei der Gestikerkennung verarbeitet werden sollen.


elm.addEventListener("pointerdown", function (evt) {
// adds the current mouse, pen, or touch contact for gesture recognition
myGesture.addPointer(evt.pointerId);
});

Hinweis  Konfigurieren Sie das Element mithilfe der touchAction-CSS-Eigenschaft (Cascading Stylesheets) so, dass es keine standardmäßigen Touchaktionen wie Schwenken und Zoomen ausführt, und liefern Sie stattdessen Zeigerereignisse für die Eingabe. Weitere Informationen finden Sie unter Steuern der standardmäßigen Toucheingabe.

Behandeln von Gestikereignissen

Sobald ein Gestikobjekt über ein gültiges Ziel verfügt und ihm mindestens ein Zeiger hinzugefügt wurde, beginnt es mit dem Auslösen von Gestikereignissen. Das MSGestureEvent-Objekt, das bei diesen Ereignissen gesendet wird, enthält information zu Skalierung (Zusammendrücken), Drehung, Translation und Geschwindigkeit. Die zugehörige detail-Eigenschaft enthält zusätzliche Informationen zum Status des Gestikereignisses in Form einer Bitmaske mit Kennzeichen:

GestikkennzeichenWertBeschreibung
MSGESTURE_FLAG_NONE0Normalstatus.
MSGESTURE_FLAG_BEGIN1Das Gestikereignis wurde gestartet.
MSGESTURE_FLAG_END2Das Gestikereignis wurde beendet.
MSGESTURE_FLAG_CANCEL4Das Gestikereignis wurde abgebrochen. Oft verbunden mit AND in Kombination mit MSGESTURE_FLAG_END.
MSGESTURE_FLAG_INERTIA8Die Gestik befindet sich in der Trägheitsphase. Dieses Kennzeichen wird kontinuierlich über ein MSGestureChange-Ereignis gesendet, während ein Element auf dem Bildschirm bewegt wird.

 

Weitere Informationen finden Sie im Abschnitt "Anmerkungen" der Referenz zu Gesture flags.

Einfache und komplexe Gesten

Es gibt einfache (z. B. Tippen oder Gedrückthalten) und komplexe Gestikereignisse (z. B. Zusammendrücken, Drehen oder Streifen).

Tippen

Die einfachste Gestikerkennung ist das Tippen. Wenn ein Tippvorgang erkannt wird, wird das MSGestureTap-Ereignis für das Zielelement des Gestikobjekts ausgelöst. Im Unterschied zum click-Ereignis wird die Tippbewegung nur ausgelöst, wenn ein Benutzer auf ein Element tippt (oder eine Maustaste drückt bzw. einen Stift berührt), ohne es zu verschieben. Dies ist nützlich, wenn Sie zwischen einem Benutzer, der auf ein Element tippt, und einem Benutzer, der ein Element verschiebt, unterscheiden möchten.

Gedrückthalten

Eine Gedrückthalten-Gestik liegt vor, wenn ein Benutzer ein Element mit einem Finger berührt, eine Weile gedrückt hält und dann wieder loslässt, ohne es zu verschieben. Während einer Gedrückthalteninteraktion wird das MSGestureHold-Ereignis mehrmals für die verschiedenen Gestikstatus ausgelöst:


element.addEventListener("MSGestureHold", handleHold);
function handleHold(evt) {
if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {
// Begin signals the start of a gesture. For the hold gesture, this means the user has been holding long enough in place that the gesture will become a complete press & hold if the finger is lifted.
}
if (evt.detail & evt.MSGESTURE_FLAG_END) {
// End signals the end of the gesture.
}
if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {
// Cancel signals the user started the gesture but cancelled it. For hold, this occurs when the user drags away before lifting. This flag is sent together with the End flag, signaling the gesture recognition is complete.
}
}


Komplexe Gesten (Zusammendrücken, Drehen, Streifen und Ziehen)

Dynamische Gesten wie Zusammendrücken oder Drehen werden in Form von Transformationen gemeldet, die mit CSS-2D-Transformationen vergleichbar sind. Drei Ereignisse werden für dynamische Gesten ausgelöst: MSGestureStart, MSGestureChange (wird während der Ausführung der Geste wiederholt ausgelöst) und MSGestureEnd.

Da dynamische Gesten Transformationen melden, kann MSGesture auf einfache Weise zusammen mit CSS-2D-Transformationen verwendet werden, um ein Element wie etwa ein Foto oder ein Puzzleelement zu bearbeiten. Das Skalieren, Drehen und Ziehen eines Elements ist mit Code möglich, der so oder ähnlich aussieht:


targetElement.addEventListener("MSGestureChange", manipulateElement);
function manipulateElement(e) {
// Uncomment the following code if you want to disable the built-in inertia provided by dynamic gesture recognition
// if (e.detail == e.MSGESTURE_FLAG_INERTIA)
// return;
 
var m = new MSCSSMatrix(e.target.style.transform); // Get the latest CSS transform on the element
e.target.style.transform = m
.translate(e.offsetX, e.offsetY) // Move the transform origin under the center of the gesture
.rotate(e.rotation * 180 / Math.PI) // Apply Rotation
.scale(e.scale) // Apply Scale
.translate(e.translationX, e.translationY) // Apply Translation
.translate(-e.offsetX, -e.offsetY); // Move the transform origin back
}


Dynamische Gesten wie Skalieren und Drehen werden mit der Maus unterstützt, indem das Mausrad in Kombination mit der Zusatztaste CTRL bzw. SHIFT gedreht wird.

Informationen zur Trägheit

Bei der Trägheit handelt es sich um eine Bewegung, die fortgeführt wird, nachdem Sie den Kontakt mit dem Bildschirm bereits beendet haben. Die Unterstützung der Trägheit ist in Gestikobjekte integriert und erfordert mit Ausnahme der Handler für die Ereignisse keinen zusätzlichen Code. Auf das MSInertiaStart-Ereignis folgt eine Reihe von MSGestureChange-Ereignissen, die von der Streifgeschwindigkeit abhängig sind, worauf ein MSGestureEnd-Ereignis folgt. Das MSInertiaStart-Ereignis wird nur ausgelöst, wenn die Streifgeschwindigkeit hoch genug ist. So kann der Code zwischen einer langsamen Bewegung und einer kurzen Streichbewegung unterscheiden.

API-Referenz

MSGesture
MSGestureEvent
MSManipulationEvent

Beispiele und Lernprogramme

Untersuchen der Mandelbrotmenge mithilfe von HTML5
So wird's gemacht: Simulieren von "Zeigen" auf Geräten, die die Toucheingabe unterstützen
So wird's gemacht: Erstellen eines Puzzlespiels mit Canvas, SVG und Multitoucheingabe
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

IE11: Touch-Browsing für das moderne Web und die Zukunft
Die Entwicklung interoperabler Zeigerereignisse: Verbesserte Eingabeereignisse für unterschiedliche Eingabemöglichkeiten
Weitere Möglichkeiten für Gestikereignisse, die über Schwenken, Zoomen und Tippen hinausgehen
Richtlinien für das Erstellen von Websites für die Fingereingabe
Behandlung von Multitouch- und Mauseingabe in allen Browsern
Toucheingabe für IE10 und Windows Store-Apps

Verwandte Themen

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

 

 

Anzeigen:
© 2014 Microsoft