Zeiger- und Gestikereignisse in Internet Explorer 10

Hinweis  Eine aktuellere Übersicht über diese Themen finden Sie unter Zeigerereignisse und Gestikereignisse.
 
Achtung  Die W3C-Spezifikation zu Zeigerereignissen wurde seit ihrer Einführung in Internet Explorer 10 mehrfach überarbeitet. Außerdem gelten die Microsoft-spezifischen Präfixe (MS) für Zeigerereignis-APIs ab Internet Explorer 11 als veraltet. Eine Zusammenfassung der Änderungen und bewährten Methoden in Bezug auf die Kompatibilität finden Sie unter Updates für Zeigerereignisse.
 

Internet Explorer 10 und Windows Store-Apps mit JavaScript für Windows 8 unterstützen jetzt auf der Webplattform die Finger- und Stifteingabe. Da Internet Explorer 10 das Konzept eines Zeigers einführt, müssen Sie keinen Code mehr erstellen, der jeden Eingabetyp separat behandelt.

Ein Zeiger ist ein beliebiger Kontaktpunkt auf dem Bildschirm: er kann eine Maus, ein Finger oder ein Stift sein. Sie können jetzt leicht über die Eingabehardware und alle Formularfaktoren hinweg für eine einheitliche Erfahrung sorgen, indem Sie das Schreiben in einen einzelnen Satz von Zeigerereignissen durchführen, in denen die Eingabe per Maus, Finger und Stift gekapselt ist.

Zeigerereignisse

Ähnlich wie Mausereignisse werden Zeigerereignisse für jeden Zeiger bei "down", "move", "up", "over" und "out" ausgelöst:

Im Gegensatz zur Maus ist es möglich, dass auf dem Bildschirm mehrere Zeiger gleichzeitig vorhanden sind (beispielsweise bei der Verwendung von Hardware mit Mehrfingereingabe). In diesem Fall wird für jeden Kontaktpunkt ein eigenes Zeigerereignis ausgelöst, sodass Sites und Anwendungen für die Mehrfingereingabe problemlos erstellt werden können.

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 MSPointerCancel-Ereignis gekennzeichnet.

Mauskompatibilität

Nach dem Auslösen von Zeigerereignissen löst Internet Explorer 10 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.

Featureerkennung

Ob Zeigerereignisse unterstützt werden, können Sie auf folgende Weise am besten erkennen:


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

Diese Featureerkennung ist jedoch kein Hinweis darauf, dass das Gerät die Finger- oder Stifteingabe unterstützt. Sie gibt vielmehr an, dass die Plattform unabhängig von der im System vorhandenen Hardware Zeigerereignisse auslöst.

Im folgenden Beispiel wird eine einfache App für Fingerzeichnungen verwendet, bei der die Eingabe per Maus, Finger und Stift mithilfe von Zeigerereignissen verarbeitet wird.


<!DOCTYPE html>
<html>
<head>
  <title>Scribble touch example</title>
<style>
  html { 
    -ms-touch-action: none; /* Direct all pointer events to JavaScript code. */
  }
</style>

<script>
  window.addEventListener('load', function () {
    var canvas = document.getElementById("drawSurface"),
    context = canvas.getContext("2d");
    if (window.navigator.msPointerEnabled) {
      canvas.addEventListener("MSPointerMove", paint, false);
    }
    else {
      canvas.addEventListener("mousemove", paint, false);
    }
    function paint(event) {
      // paint a small rectangle every time the event fires. 
      context.fillRect(event.clientX, event.clientY, 5, 5);
    }
  });
</script>

</head>
<body>

  <canvas id="drawSurface" width="500px" height="500px" style="border:1px solid black;">Canvas isn't supported by this browser or document mode</canvas>
</body>
</html>


Allgemeine Vorgehensweise bei der Optimierung der Fingereingabe

Internet Explorer 10 stellt übliche Standardbehandlungen für einfache Interaktionen mittels Fingereingabe bereit. Beispiel:

  • Verschieben von bildlauffähigen Bereichen
  • Zoomen durch Zusammendrücken
  • Gedrückthalten-Kontextmenüs
  • Fingereingabeauswahl

Diese Features funktionieren automatisch, sodass Sites und Apps standardmäßig ein gutes Verhalten aufweisen. Es kann jedoch sein, dass Sie diese Features möglicherweise zugunsten einer eigenen Benutzeroberfläche deaktivieren möchten.

Testen auf Unterstützung der Fingereingabe

Das Testen auf das Vorhandensein der Fingereingabefunktion und auf Unterstützung der Mehrfingereingabe ist mithilfe der msMaxTouchPoints-Eigenschaft leicht möglich. Gehen Sie wie folgt vor, um zu überprüfen, ob ein Gerät die Fingereingabe unterstützt (und wenn ja, für wie viele Punkte):

// To test for touch capable hardware 
if(navigator.msMaxTouchPoints) { ... }

// To test for multi-touch capable hardware
if(navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) { ... }

// To get the maximum number of points the hardware supports
var touchPoints = navigator.msMaxTouchPoints;


Verschieben und Zoomen

Zeigerereignisse werden beim Schwenken oder Zoomen nicht ausgelöst. In Fällen wie dem vorherigen Beispiel mit dem Zeichenprogramm deaktivieren Sie das Schwenken und Zoomen in einem Bereich, damit Sie diese Ereignisse für Ihre eigenen Zwecke nutzen können. Verwenden Sie hierzu beispielsweise CCS (Cascading Style Sheets).


.disablePanZoom {
  -ms-touch-action: none; /* Disables all pan/zoom behaviors and fire pointer events in JavaScript instead. */
}

Fingereingabeauswahl

In Internet Explorer 10 können Sie durch Tippen auf oder neben den Text ein Wort auswählen. Wenn Sie die Textauswahl deaktivieren möchten, können Sie genauso wie in Windows Internet Explorer 9 vorgehen.


element.addEventListener("selectstart", function(e) { e.preventDefault(); }, false);
 // Disables selection


Kontextmenüs

Beim Gedrückthalten bestimmter Elemente in Windows Internet Explorer wird ein visuelles Halten-Objekt angezeigt, mit dem darauf hingewiesen wird, dass in Kürze ein Kontextmenü angezeigt wird. Wenn Sie Ihren Finger anheben, wird das Kontextmenü angezeigt. Beim Wegziehen des Fingers wird das visuelle Objekt verworfen und das Kontextmenü nicht angezeigt.

Falls Sie ein eigenes Kontextmenü bereitstellen möchten, ist dies mit Internet Explorer 10 weiterhin möglich. Rufen Sie einfach event.preventDefault für das contextmenu-Ereignis auf, und führen Sie den Code zum Anzeigen des Kontextmenüs aus. Internet Explorer sorgt automatisch dafür, dass für Ihr Kontextmenü die Fingereingabe funktioniert, und stellt beim Gedrückthalten den gleichen visuellen Hinweis bereit. In diesem Beispiel wird ein contextmenu-Ereignis verwendet, um zu erkennen, wann Benutzer ein Element drücken, gedrückt halten und loslassen. Wenn Benutzer den Finger heben, wird das contextmenu-Ereignis ausgelöst und eine Meldung angezeigt.


<!DOCTYPE html>
<html >
<head>
     <title>Touch and hold example</title>
  <style>
   
    #touchspot {
      width:100px;
      height:100px;
      background-color:aquamarine;
      border:solid 2px black;
    }
  </style>

</head>
<body>
  <div id="touchspot">Touch and hold me</div>

  <script>
    var elm = document.getElementById("touchspot");

    elm.addEventListener("contextmenu", function (e) {
      e.target.innerHTML = "Touch has pressed, held, and lifted, or mouse has been right clicked. Time to show a custom menu.";
      e.preventDefault();    // Disables system menu
    }, false);

  </script>
</body>
</html>


Für den Fall, dass Sie kein Kontextmenü anzeigen möchten – etwa bei einem Spiel, bei dem Benutzer ein Steuerelement eine Weile mit dem Finger gedrückt halten sollen –, sollten Sie sowohl das Kontextmenü als auch den visuellen Hinweis deaktivieren. Dazu müssen Sie lediglich zwei Ereignisse abbrechen.



 // Disables visual
element.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false);
// Disables menu
element.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);
 

Gestikobjekte und -ereignisse

Zusätzlich zu Zeigerereignissen kann Windows 8 auch komplexe Interaktionen, die als Gestik bezeichnet werden (wie Zusammendrücken, Streifen usw.), in allen Anwendungen einheitlich erkennen.

Hinweis  Die in diesem Abschnitt beschriebenen APIs werden unter Windows 7 nicht unterstützt.
 

Das im vorherigen Beispiel verwendete MSGesture-Objekt ermöglicht eine verbesserte Gestikunterstützung für Aktionen wie Halten, Schwenken und Tippen, ohne dass Sie sämtliche Zeigerereignisse selbst überwachen müssen. Der Haken daran ist, dass Sie das onmspointerdown-Ereignis erfassen und das MSGesture-Objekt mit dem Ziel (Objekt, von dem Gestikereignisse erwartet werden) und der pointerId konfigurieren. Wenn Sie kein MSGesture-Objekt instanziieren und konfigurieren, werden von Ihrem Element nur Zeigerereignisse ausgelöst.

In Gestikereignissen sind mehr Informationen als in einfachen Zeigerereignissen enthalten. Wenn ein Benutzer z. B. kurz tippt und den Finger sofort wieder anhebt, wird automatisch das MSGestureTap-Ereignis ausgelöst. Wenn der Benutzer die Oberfläche berührt und den Finger darauf lässt, wird das MSGestureHold-Ereignis ausgelöst.

Wenn der Benutzer mit dem Finger streift, werden die Ereignisse MSGestureStart, MSGestureChange und MSGestureEnd ausgelöst.

Beim schnellen Streifen und Anheben des Fingers wird ein MSInertiaStart-Ereignis ausgelöst.

Hinweis  Sie können erkennen, wann sich eine Geste in der Phase Trägheit befindet, da die detail-Ereigniseigenschaft des MSGestureChange-Ereignisses dann event.MSGESTURE_FLAG_INERTIA lautet.
 

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 unter Internet Explorer 10 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.

Die wichtigsten Gestikereignisse lauten:

Vom MSGestureEvent-Objekt, das an jedes Element übergeben wird, werden Eigenschaften zurückgegeben. Mit deren Hilfe kann die App den Zustand des Objekts bestimmen, das geändert wird. Ermitteln Sie mit der scale-Eigenschaft, ob Benutzer versucht haben, das Element größer anzuzeigen oder seine Größe zu ändern. Wenn Benutzer das Element auf dem Bildschirm drehen, können Sie den Winkel mit der rotation-Eigenschaft in Radiant abrufen. Bei diesen beiden Eigenschaften handelt es sich um Änderungen, die seit dem letzten MSGestureEvent vorgenommen wurden.

Gestikkennzeichen

Mit MSGesture-Kennzeichen wird der Status eines Ereignisobjekts zurückgegeben, z. B. MSGestureStart, MSGestureChange oder MSGestureHold. Dies sind:

  • MSGESTURE_FLAG_NONE: Kein besonderer Status.
  • MSGESTURE_FLAG_BEGIN: Kennzeichnet den Anfang eines Gestikereignisses.
  • MSGESTURE_FLAG_END: Kennzeichnet das Ende eines Gestikereignisses.
  • MSGESTURE_FLAG_CANCEL: Gibt an, dass das Gestikereignis abgebrochen wurde.
  • MSGESTURE_FLAG_INERTIA: Gibt an, wann der Computer sich in seiner Trägheitsphase befindet.

Wenn Benutzer beispielsweise mit dem Finger über den Bildschirm streifen, reagieren die Ereignisse und Details wie folgt:

  • Das MSGestureStart-Ereignis wird zusammen mit dem MSGESTURE_FLAG_BEGIN-Kennzeichen ausgelöst.
  • Wenn Benutzer den Finger bewegen, wird das MSGestureChange-Ereignis wiederholt ausgelöst, wobei MSGESTURE_FLAG_NONE über die detail-Eigenschaft übergeben wird.
  • Wenn der Benutzer den Finger hebt, wird das MSInertiaStart-Ereignis ausgelöst und dabei das MSGESTURE_FLAG_INERTIA-Kennzeichen übergeben.
  • Solange das Element auf dem Bildschirm bewegt wird, wird das MSGestureChange-Element weiter ausgelöst und dabei das MSGESTURE_FLAG_INERTIA-Kennzeichen übergeben.
  • Wenn die Bewegung endet, wird das MSGestureEnd-Ereignis ausgelöst, und zwei Kennzeichen – MSGESTURE_FLAG_INERTIA und MSGESTURE_FLAG_END – werden mit der detail-Eigenschaft übergeben.

Wenn der Benutzer den Bildschirm berührt, den Finger einige Sekunden lang nicht bewegt und den Finger dann bewegt, laufen die Ereignisse und Details wie folgt ab:

  • Nach einigen Sekunden wird das MSGestureHold-Ereignis ausgelöst und das MSGESTURE_FLAG_BEGIN-Kennzeichen übergeben.
  • Wenn der Benutzer mit dem Bewegen des Fingers beginnt, wird das MSGestureHold-Ereignis ausgelöst, und die Kennzeichen MSGESTURE_FLAG_END und MSGESTURE_FLAG_CANCEL werden übergeben. So wird angegeben, dass das Halten abgebrochen wurde.
  • Wenn der Benutzer den Finger bewegt, wird das MSGestureChange-Ereignis wiederholt ausgelöst, während MSGESTURE_FLAG_NONE über die detail-Eigenschaft übergeben wird. Ab hier gelten die gleichen Schritte wie in der vorherigen Sequenz.
  • Wenn der Benutzer den Finger hebt, wird das MSInertiaStart-Ereignis ausgelöst und dabei das MSGESTURE_FLAG_INERTIA-Kennzeichen übergeben.
  • Solange das Element auf dem Bildschirm bewegt wird, wird das MSGestureChange-Element weiter ausgelöst und dabei das MSGESTURE_FLAG_INERTIA-Kennzeichen übergeben.
  • Wenn die Bewegung endet, wird das MSGestureEnd-Ereignis ausgelöst, und zwei Kennzeichen – MSGESTURE_FLAG_INERTIA und MSGESTURE_FLAG_END – werden mit der detail-Eigenschaft übergeben.

Eine vollständige Beispiel-App mit Gestikereignissen finden Sie im Referenzthema zu MSGesture.

Verwandte Themen

Gestikereignisse
Zeigerereignisse

 

 

Anzeigen: