Gestenereignisse jenseits von Verschieben, Zoomen und Tippen

IEBlog Deutsch

Blog des Internet Explorer-Entwicklerteams

Gestenereignisse jenseits von Verschieben, Zoomen und Tippen

  • Comments 0

Ausgehend von Ihrem Feedback haben wir neue Lösungen entwickelt, wie Websites die Fingereingabe für IE10 in der Windows 8 Release Preview mithilfe von Gestenereignissen optimieren können. Zu einem früheren Zeitpunkt haben wir uns damit beschäftigt, welche Schritte Webentwickler ausführen sollten, um eine optimale Touchscreen-Unterstützung für Websites sicherzustellen. Außerdem wurde erläutert, wie die Benutzerfreundlichkeit für unterschiedlichste Eingabegeräte, einschließlich Mehrfingereingabegeräte, mithilfe von hardwareunabhängigen Zeigerereignissen erweitert werden kann. In diesem Beitrag werden Gestenereignisse in IE10 behandelt. Ein Beispiel für solche Gestenereignisse finden Sie in der Test Drive-Demo Browseroberfläche unten.

Screenshot der Browseroberflächen-Demo mit Bildern, die zufällig auf der Oberfläche angeordnet sind.
Benutzer können Fotos mit der Browseroberflächen-Demo ziehen, zusammendrücken und drehen.

Mit IE10 in der Windows 8 Release Preview werden Objekte zur Gestenerkennung in JavaScript eingeführt. Websites können Gestenobjekte erstellen, entscheiden, welche Zeiger (Maus, Stift- oder Fingereingabe) verarbeitet werden sollen, und Gestenereignisse an jedes gewünschte Element weiterleiten. Anschließend berechnet der Browser, welche Geste ausgeführt wird und benachrichtigt die Webseite mithilfe von Ereignissen. Dies erlaubt es Entwicklern, Gesten zu erstellen, die systemintern noch von keinem anderen Browser umgesetzt werden können. Dies beinhaltet mehrere gleichzeitig ausgeführt Gesten, beispielsweise das Drehen zweier Puzzleteile mit den Händen.

Sehen wir uns an, wie dies im Code umgesetzt ist.

Erstellen eines Gestenobjekts

Der erste Schritt für die Handhabung von Gesten auf einer Website besteht im Instanziieren eines Gestenobjekts.

var myGesture = new MSGesture();

Als nächstes wird der Geste ein Zielelement zugewiesen. Dies ist das Element, für welches der Browser Gestenereignisse auslöst. Dieses Element bestimmt außerdem den Koordinatenraum für die Ereignisse.

elm = document.getElementById("someElement");

myGesture.target = elm;

elm.addEventListener("MSGestureChange", handleGesture);

Zuletzt muss festgelegt werden, welche Zeiger das Gestenobjekt bei der Gestenerkennung verarbeiten soll.

elm.addEventListener("MSPointerDown", function (evt) {

// adds the current mouse, pen, or touch contact for gesture recognition

myGesture.addPointer(evt.pointerId);

});

Hinweis: Denken Sie daran, dass Sie –ms-touch-action verwenden müssen, damit das Element so konfiguriert ist, dass es keine standardmäßigen Fingereingabeaktionen wie Ziehen oder Zoomen ausführt, sondern Zeigeereignisse für die Eingabe bereitstellt.

Verarbeiten von Gestenereignissen

Sobald ein Gestenobjekt über ein gültiges Ziel verfügt und mindestens ein Zeiger hinzugefügt wurde, beginnt es mit dem Auslösen von Gestenereignissen. Es gibt zwei Sorten von Gestenereignissen: Statische Gesten (wie Tippen oder Halten) und dynamische Gesten (wie Zusammendrücken, Drehen oder Streifen).

Tippen

Die einfachste Gestenerkennung ist das Tippen. Wird ein Tippen erkannt, wird das MSGestureTap-Ereignis für das Zielelement des Gestenobjekts ausgelöst. Im Unterschied zu einem Click-Ereignis löst die Tippbewegung nur dann aus, wenn ein Benutzer die Oberfläche mit dem Finger berührt (bzw. eine Maustaste drückt, oder einen Stift berührt), ohne diesen dabei zu bewegen. Dies ist wichtig, um den Unterschied zwischen dem Tippen auf ein Element und dem Ziehen eines Elements zu erkennen.

Drücken und Halten

Eine Gedrückthaltebewegung liegt vor, wenn ein Benutzer die Oberfläche mit dem Finger berührt, für einen Moment hält und den Finger dann wieder hebt, ohne ihn vorher zu bewegen. Während einer Gedrückthalteinteraktion wird das MSGestureHold-Ereignis mehrmals für die verschiedenen Phasen der Bewegung 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.

}

}

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

Dynamische Gesten, z. B. Zusammendrücken oder Drehen, werden über Transformationen gemeldet, die den CSS 2D-Transformationen ähneln. Bei dynamischen Gesten werden drei Ereignisse ausgelöst: MSGestureStart, MSGestureChange (wird während des Gestenverlaufs wiederholt ausgelöst) und MSGestureEnd. Jedes Ereignis enthält Informationen zur Skalierung (Zusammendrücken), Drehung, Translation und Geschwindigkeit.

Da dynamischen Gesten Transformationen melden, ist es sehr einfach, Elemente (z. B. Fotos oder Puzzleteile) mithilfe von MSGesture und CSS 2D-Transformationen zu manipulieren. Beispielsweise kann das Skalieren, Drehen und Ziehen von Elementen folgendermaßen aktiviert werden:

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 (z. B. Skalieren oder Drehen) werden bei Verwendung einer Maus durch Drehen des Mausrads mit STRG- oder UMSCHALTTASTE unterstützt.

Zusammenfassung

Gestenereignisse in IE10 ermöglichen das Entwickeln von Gesten, die derzeit noch bei keinem anderen Browser denkbar sind. In MSDN finden Sie ausführliche Dokumentationen zu MSGesture-Objekten und MSGesture-Ereignissen.

Verbessern Sie die Bedienung Ihrer Websites mit Gestenereignissen jenseits von verschieben, zoomen und tippen.

– Jacob Rossi, Program Manager, Internet Explorer