Funktionen für adaptive Eingabebehandlung

Das Zeigerereignismodell in Internet Explorer 10 ermöglicht Ihnen das ordnungsgemäße Behandeln aller Maus-, Stift- Finger- und Mehrfingereingaben, indem ein einfacher Satz Zeigerereignisse geschrieben wird. Ähnlich wie Mausereignisse werden Zeigerereignisse für jeden Zeiger bei "down", "move", "up", "over" und "out" ausgelöst. Eine grundlegende Fingereingabe sollte für die meisten Websites ohne Änderungen aus mehreren Gründen unterstützt werden:

  • Internet Explorer 10 stellt übliche Standardbehandlungen für einfache Interaktionen mittels Toucheingabe bereit, z. B. Schwenken von bildlauffähigen Bereichen, Doppeltippen und Zoomen durch Zusammendrücken, Toucheingabeauswahl und durch Gedrückthalten aufrufbare Kontextmenüs. Diese Features funktionieren automatisch, sodass Websites und Apps standardmäßig ein gutes Verhalten aufweisen.
  • 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.

Grundlegende Designstrategien mit Fingereingabemöglichkeit und Informationen zur Fehlerbehebung finden Sie unter Schnellstart: Machen Sie Ihre Website bereit für die Fingereingabe. Wenn Sie zur Optimierung Ihrer Website für die Fingereingabe bereit sind und weiterhin nahtlose Unterstützung von Maus- und Tastatureingabe anbieten möchten, stellt Internet Explorer 10 die in diesem Artikel beschriebenen Features für die adaptive Eingabebehandlung zur Verfügung.

Erkennen der Fingereingabe

In Internet Explorer 10 steht die msMaxTouchPoints-Eigenschaft zur clientseitigen Überprüfung der Unterstützung von Finger- und Mehrfingereingabehardware zur Verfügung:


if (navigator.msMaxTouchPoints > 1) {
  // Supports multi-touch
}

Zum serverseitigen Erkennen der Fingereingabeunterstützung bietet Internet Explorer 10 das Benutzer-Agent-Zeichenfolge"-Fingereingabe"token. Nachdem die Fingereingabeunterstützung bestätigt wurde, können Sie den pointerType des MSPointerDown-Ereignisses überprüfen, um festzustellen, ob der Benutzer Fingereingabe verwendet:


element.addEventListener("MSPointerDown",handleDown,false);
function handleDown(event) {
  if(event.pointerType == event.MSPOINTER_TYPE_TOUCH) {
    // Do something for touch input only
  }else{
    // Do something for non-touch input
  }
}

Simulation des Zeigens mit der Maus

Beim Browsern mittels Toucheingabe gibt es keine Entsprechung für das Zeigen mit dem Mauszeiger auf ein Webseitenelement. Daher sind Aktionen oder Inhalte, die mit dieser Methode aktiviert werden, für Benutzer, die Toucheingabe verwenden, u. U. nicht verfügbar. Ein gängiges Szenario zu diesem Problem sind Untermenüs, die durch Zeigen aktiviert werden. Zur Vermeidung dieses Problems wird daher empfohlen, Zeigen nicht für das Ausblenden von Inhalten zu verwenden, mit denen Benutzer interagieren können. Verwenden Sie stattdessen lieber das onclick-Ereignis, um Elemente ein- und auszublenden. Internet Explorer 10 stellt für die bereits vorhandene aria-haspopup-Eigenschaft aber auch noch ein neues Verhalten bereit, um das Zeigen auf Seitenelemente zu simulieren:


<style type="text/css">
#menu .cssSubMenu {
  display: none;
}
#menu:hover .cssSubMenu {
  display: block;
}
</style>

...
<div id="menu" aria-haspopup="true">
  <a>CSS Hover Menu</a>
    <div aria-haspopup="false" class="cssSubMenu">
      <a>Sub menu item 1</a> </div>
    <div aria-haspopup="false" class="cssSubMenu">
      <a>Sub menu item 2</a> </div>
    <div aria-haspopup="false" class="cssSubMenu">
      <a class="cssSubLink">Sub menu item 3</a> </div>
</div>


Weitere Informationen finden Sie unter Verwenden von "aria-haspopup" zur Simulation von "Zeigen" auf Geräten, die die Fingereingabe unterstützen.

Festlegen und Außerkraftsetzen von Verhaltensweisen für Fingereingaben

Standardmäßig werden in Internet Explorer 10 für diese Interaktionen Fingereingabebewegungen, Zusammendrücken und Doppeltippen verwendet, und es werden keine Ereignisse für diese Interaktionen gesendet. Mithilfe der -ms-touch-action Cascading Style Sheets (CSS)-Eigenschaft können Sie diese Standardeinstellungen außer Kraft setzen und die zulässigen Verhaltensweisen für Fingereingabeaktionen für Ihre Website festlegen. In der folgenden Tabelle werden die Werte beschrieben.

WertBeschreibung

auto

Anfangswert. Der Browser bestimmt das Verhalten für das Element.

none

Das Element lässt keine standardmäßigen Verhaltensweisen für die Fingereingabe zu.

pan-x

Das Element lässt die fingereingabegesteuerte Verschiebung auf der horizontalen Achse zu.

pan-y

Das Element lässt die fingereingabegesteuerte Verschiebung auf der vertikalen Achse zu.

pinch-zoom

Das Element lässt Zoomen durch Zusammendrücken zu.

manipulation

Das Element lässt fingereingabegesteuertes Verschieben und Zoomen durch Zusammendrücken zu. (Kurzform von "pan-x pan-y pinch-zoom").

double-tap-zoom

Das Element lässt Zoomen per Doppeltippen zu.

inherit

Das Element erbt den -ms-touch-action-Wert vom übergeordneten Element.

 

Für die differenzierte Steuerung des Elements Zoomen und Verschieben/Bildlauf mit Fingereingabeunterstützung gibt es eine Reihe von neuen Eigenschaften, die es Ihnen ermöglichen, Zoom- und Bildlauflimits zu setzen, Zoom- und Bildlauf-Andockpunkte festzulegen und die Achse der Verschiebebewegung zu sperren oder die formfreie Verschiebung zuzulassen. Zum Steuern, welche Elemente auf der Seite ausgewählt werden können, verwenden Sie die -ms-user-select, die für alle Eingabearten gleich funktioniert.

Entwicklerhandbuch Schwenken und Zoomen, Festlegen des auswählbaren Texts
BeispieleBeispiel für Bildlauf, Verschieben und Zoomen mit Fingereingabe, Beispiel für CSS-Benutzerauswahl
Referenz Fingereingabe: Zoomen und Schwenken, -ms-user-select

 

Zeigerereignismodell

Internet Explorer 10 verfügt über ein Zeigerereignismodell, das Ihnen das einfache Behandeln aller Maus-, Stift-, Finger- und Mehrfingereingaben in abstrahierter Form ermöglicht, die als Zeiger bezeichnet wird. Die Ereignisse zum Erfassen von Standardzeigereingaben und die Eigenschaften dieser Ereignisse sind denen ähnlich, die Ihnen von Mausereignissen bekannt sind (z. B. "down", "move", "up", "over" und "out"), verfügen jedoch über einige zusätzliche Vorteile für andere Eingabeformen und mehrere Zeiger. Vorschläge zum Behandeln von Mehrfinger- und Mauseingaben in anderen Browsern finden Sie im IEBlog.

Das Zeigerereignismodell wird in einem konzeptionellen Diagramm dargestellt: Drei Kugeln ("Pen", "Touch" und "Mouse") verschwinden in einem Trichter und erscheinen unten als "Pointer".
Entwicklerhandbuch Zeiger- und Gestikereignisse
Demos Fingereingabeeffekte, Vogelfang mit dem Lasso, Liebe liegt in der Luft, Irischer Frühling
Beispiel So wird's gemacht: Erstellen eines Puzzlespiels mit Canvas, SVG und Mehrfingereingabe
Referenz Ereignisse

 

Gestikereignismodell

Zum Erstellen erweiterter Fingereingabemethoden verfügt Internet Explorer 10 über das Gestikereignismodell, das Ihnen das Behandeln komplexerer Benutzerinteraktionen ermöglicht.

Entwicklerhandbuch Zeiger- und Gestikereignisse
DemosBrowseroberfläche, Fingereingabeeffekte, Vogelfang mit dem Lasso, Liebe liegt in der Luft, Irischer Frühling
Beispiel So wird's gemacht: Erstellen eines Puzzlespiels mit Canvas, SVG und Mehrfingereingabe
Referenz Ereignisse

 

HTML5-Formulare mit Fingereingabemöglichkeit

Ab Internet Explorer 10 werden HTML5-Eingabesteuerelemente unterstützt, die alle für die Fingereingabe optimiert sind. Beispiele für Verbesserungen bei der Toucheingabe:

  • Auswahl von Steuerelementkarussellen in allen Optionen, die fortlaufenden Bildlauf ermöglichen
  • Texteingabefelder verfügen über eine Schaltfläche zum Löschen des gesamten Inhalts
  • Bildlauffähige Unterbereiche reagieren auf Fingereingabe
  • Das Bereichssteuerelement bietet unterbrechungsfreies Feedback des gewählten Werts
  • Schaltflächen und Links ermöglichen das Abbrechen des Klickens per Fingereingabe durch Loslassen des Ziels
  • Optionsfelder und Kontrollkästchen sind durch Fingereingaben einfach zu bedienen und werden auch durch ein Berühren ihrer Bezeichnungen aktiviert
  • QuickInfos sind beim Berühren eines Links größer und weiter entfernt als bei der Verwendung einer Maus

Bei der Texteingabe können Sie die Fingereingabefunktion für Benutzer weiter verbessern, indem Sie bestimmte Eingabearten angeben, z. B. E-Mail, Telefon oder URL — Internet Explorer 10 zeigt dann unter Windows 8 ein für den jeweiligen Eingabetyp geeignetes Bildschirmtastaturlayout an.

Entwicklerhandbuch HTML5-Formulare
DemosTouch First Controls
BeispieleBeispiel für Formularsteuerelemente

 

Verwandte Themen

Entwickeln von adaptiven Websites
Funktionen für ein adaptives Layout

 

 

Anzeigen:
© 2014 Microsoft. Alle Rechte vorbehalten.