Schnellstart: Statische Gesten (HTML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Behandeln Sie einfache Windows-Runtime-Gestenereignisse, um die Benutzerumgebung für in der Windows 8-Sprache für Fingereingaben beschriebene statische Gesten (z. B. Tippen, Doppeltippen, Gedrückthalten und Rechtstippen) anzupassen.

Die meisten Apps verarbeiten zwar Gesten (Tippen, Verschieben, Zoomen usw.), die Rohzeigerdaten werden jedoch nicht genutzt, sondern nur zur Gestikerkennung weitergeleitet. In diesem Beispiel nutzen wir diese Rohzeigerdaten für die Behandlung und Verarbeitung statischer Gesten, um so das Interaktionsmodell Ihrer App zu erweitern. Das Beispiel baut auf den grundlegenden Zeigerereignissen auf, die in Schnellstart: Zeiger beschrieben werden.

Updates für Windows 8.1: In Windows 8.1 wird eine Reihe von Updates und Verbesserungen für die Zeigereingabe-APIs eingeführt. Weitere Informationen dazu finden Sie unter API-Änderungen für Windows 8.1.

Wenn Sie noch keine Erfahrungen mit der Entwicklung von Apps mit JavaScript haben,: lesen Sie die Informationen in diesen Themen, um sich mit den hier erläuterten Technologien vertraut zu machen.

Erstellen Ihrer ersten App mit JavaScript

Roadmap für Apps mit JavaScript

Informieren Sie sich über Ereignisse unter Schnellstart: Hinzufügen von HTML-Steuerelementen und Behandeln von Ereignissen

App-Features von A bis Z:

In unserer Reihe App-Features von A bis Z können Sie sich genauer über diese Funktion informieren.

Benutzerinteraktion von A bis Z (HTML)

Anpassung der Benutzerinteraktion von A bis Z (HTML)

Richtlinien für die Benutzeroberfläche:

Die Plattform-Steuerelementbibliotheken (HTML und XAML) bieten umfassende Funktionalität für Benutzerinteraktionen, u. a. für Standardinteraktionen, animierte Bewegungseffekte und visuelles Feedback. Wenn Sie keine Unterstützung für angepasste Interaktionen benötigen, sollten Sie diese integrierten Steuerelemente verwenden.

Falls die Funktionalität der Plattformsteuerelemente nicht ausreicht, können Ihnen die folgenden Richtlinien für Benutzerinteraktionen dabei helfen, eine ansprechende, immersive und für alle Eingabemodi einheitliche Interaktionsumgebung bereitzustellen. Diese Richtlinien betreffen in erster Linie Fingereingaben, sie sind jedoch auch für Touchpad-, Maus-, Tastatur- und Stifteingaben relevant.

• Richtlinien für häufige Benutzerinteraktionen
• Richtlinien für Streifen
• Richtlinien für optischen Zoom und Änderung der Fenstergröße
• Richtlinien für Schwenkung
• Richtlinien für Drehung
• Richtlinien für semantischen Zoom
• Richtlinien für die Text- und Bildauswahl
• Richtlinien für Zielgruppenadressierung
• Richtlinien für visuelles Feedback

Beispiele: Sehen Sie sich unter Beispiele für Apps diese Funktionalität in Aktion an.

Anpassung der Benutzerinteraktion von A bis Z

Eingabe: Beispiel für die Behandlung von DOM-Zeigerereignissen

Eingabe: Beispiel für Manipulationen und Gesten (JavaScript)

Eingabe: Beispiel für Windows 8-Bewegungen

Ziel: Um mehr über das Lauschen auf sowie Behandeln und Verarbeiten von Basisgesten über Eingaben durch Berührung, Maus, Zeichen-/Eingabestift und Windows Runtime-Gestenereignisse zu erfahren,

Voraussetzungen

schlagen Sie unter Schnellstart: Zeiger und Schnellstart: DOM-Gesten und -Manipulationen nach.

In diesem Thema wird vorausgesetzt, dass Sie eine einfache App mit JavaScript erstellen können, die auf der Vorlage „Windows-Bibliothek für JavaScript“ basiert.

Für dieses Lernprogramm ist Folgendes erforderlich:

• Installieren Sie Microsoft Visual Studio.
• Fordern Sie eine Entwicklerlizenz an. Anweisungen finden Sie unter Entwickeln mit Visual Studio 2013.
• Erstellen Ihrer ersten App mit JavaScript
• Informationen zu WinJS-Objekten und -Steuerelementen finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.

Zeitaufwand: 30 Minuten.

Was sind Gestikereignisse?

Eine Geste ist eine physische Bewegung, die mit dem Eingabegerät (ein oder mehrere Finger auf einem Touchscreen, Zeichen-/Eingabestiftdigitalisierer, Maus usw.) ausgeführt wird. Diese natürlichen Interaktionen werden Vorgängen in Elementen sowohl im System als auch in Ihrer App zugewiesen. Weitere Informationen finden Sie unter Gesten, Manipulationen und Interaktionen.

In der folgenden Tabelle sind die in dieser Schnellstartanleitung behandelten statischen Gesten aufgeführt.

Geste		Beschreibung
Tippen/Doppeltippen		Ein einzelner Kontakt, der sofort aufgehoben oder beendet wird. Durch das Tippen auf ein Element wird dessen primäre Aktion aufgerufen. Bei Doppeltippen handelt es sich um zwei schnell hintereinander ausgeführte Tippbewegungen, die hierdurch ausgelöste Aktion kann je nach den Anforderungen Ihrer App definiert werden. Anfangszustand: Ein Kontakt innerhalb des umgebenden Rechtecks eines Objekts festgestellt. Bewegung: Keine. Beendigungszustand: Letzter Kontakt aufgehoben bzw. beendet.
Gedrückthalten/Rechtstippen		Ein einzelner Kontakt, der sich solange nicht bewegt, bis ein Zeitschwellenwert überschritten wird. Das Gedrückthalten bewirkt, dass ausführliche Informationen oder visuelle Lernelemente (beispielsweise eine QuickInfo oder ein Kontextmenü) angezeigt werden, ohne dass eine Aktion ausgeführt werden muss. Das Rechtstippen ist eng mit der Gedrückthaltebewegung verbunden. Das Rechtstippereignis wird beim Auslassen der Gedrückthaltebewegung ausgelöst. Anfangszustand: Ein Kontakt innerhalb des umgebenden Rechtecks eines Objekts festgestellt. Bewegung: Keine. Beendigungszustand: Letzter Kontakt aufgehoben bzw. beendet.
Weitere Informationen zu diesen Gesten und ihrer Beziehung zur Windows-Sprache für die Fingereingabe finden Sie unter Design für Interaktion per Fingereingabe.

 

Wichtig  Wenn Sie eine eigene Interaktionsunterstützung implementieren, sollten Sie daran denken, dass die Benutzer eine intuitive Umgebung erwarten, die die direkte Interaktion mit den UI-Elementen der App beinhaltet. Es empfiehlt sich, die benutzerdefinierten Interaktionen basierend auf den Plattform-Steuerelementbibliotheken (HTML und XAML) zu modellieren, um auf diese Weise für eine konsistente und intuitive Benutzerumgebung zu sorgen. Die Steuerelemente in diesen Bibliotheken bieten umfassende Funktionen für Benutzerinteraktionen wie Standardinteraktionen, animierte Bewegungseffekte, visuelles Feedback und Barrierefreiheit. Erstellen Sie benutzerdefinierte Interaktionen nur dann, wenn ein eindeutiger, klar umrissener Bedarf besteht und es keine Basisinteraktion gibt, die das gewünschte Szenario unterstützt.

 

Erstellen der Benutzeroberfläche

Bei dem folgenden Beispiel handelt es sich um eine einfache Frage-/Antwort-App. Ein Quadrat (inputBox) dient als Zielobjekt für die Erkennung und Verarbeitung von Zeigereingaben und statischen Gesten. Alle Fragen, Hinweise und Antworten werden innerhalb dieses Objekts angezeigt.

Die App bietet die folgenden Funktionen für Benutzerinteraktionen:

• Doppeltippen: startet und stoppt die Fragen und den App-Timer.
• Tippen: ruft die Fragen auf.
• Gedrückthalten : zeigt eine Reihe von Hinweisen zu der aktuellen Frage an, wobei alle paar Sekunden ein neuer Hinweis angezeigt wird, solange der Kontakt gehalten wird. Dieses Interaktionsverhalten richtet sich nach den Richtlinien für visuelles Feedback und den Empfehlungen der Windows-Sprache für die Fingereingabe, die besagen, dass Drück- und Gedrückthaltegesten auf die Anzeige von Informations-UI zu beschränken sind.
• Rechtstippen (oder das Auslassen der Gedrückthaltebewegung): zeigt beim Lösen des Kontakts ein Popup an, in dem der Benutzer gefragt wird, ob er die Antwort auf die Frage haben möchte. Auch diese Funktion richtet sich nach den Empfehlungen zu Kontextmenüs in den Richtlinien für visuelles Feedback und der Windows-Sprache für die Fingereingabe. Hinweis  Da der Schwerpunkt auf dem Code zum Behandeln von Gesten liegen soll, sind das Lesen von Fragen- und Antwortdaten aus einer XML-Datei sowie bestimmte UI- und App-Funktionen nicht vollständig implementiert.  

Im Folgenden ist der HTML-Code für dieses Beispiel aufgeführt.

<html>
<head>
    <meta charset="utf-8" />
    <title>js</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- BasicGesture references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/inputprocessor.js"></script>
    <script src="/js/datamanager.js"></script>
    <script src="/js/cluemanager.js"></script>
</head>
<body>
    <div class="TargetContainer" id="targetContainer">
        <div id="inputBox">
            <div id="instructions">Tap gray box below: Double tap to start questions, tap for next question, press and hold to show clues.</div>
            <div id="questions">&nbsp;</div>
            <div id="answers">
                <label for="answer">Answer:</label>
                <input type="text" id="answer" maxlength="30" size="30" style="z-index:1" />
                <button id="submit">Submit</button>
                <button id="stumped">Stumped</button>                
            </div>
            <div id="clues">
            </div>
            <div id="timerBox"></div>
        </div>
        <div id="eventLog"></div>

        <div id="answerFloater">
            <p>Show answer?</p>
            <button id="yes">Yes</button>
            <button id="no">No</button>
        </div>
    </div>
</body>
</html>

Im Folgenden ist das Cascading Stylesheet (CSS) für dieses Beispiel aufgeführt.

Hinweis  Zeigerereignisse werden bei Verschiebungs- oder Zoominteraktionen nicht ausgelöst. Sie können Verschiebungen und Zoomaktionen für einen Bereich über die CSS-Eigenschaften msTouchAction, overflow und -ms-content-zooming deaktivieren.

 

body {
/*
A manipulation-blocking element is defined as an element that explicitly 
blocks direct manipulation via declarative markup, and instead fires gesture 
events such as MSGestureStart, MSGestureChange, and MSGestureEnd.
*/
    overflow: hidden;
    position: absolute;
    font-family: 'Segoe UI';
    font-size: small;
    touch-action: none;
    background-color: black;
}

div #targetContainer {
    position: relative;
    height: fill-available;
    width: fill-available;
}

div #inputBox {
    position: relative;
    width: 640px;
    height: 640px;
    color: black;
    overflow: hidden;
    background-color: darkgrey;
    margin: 0px;
    padding: 0px;
    border-width: 1px;
    border-color: white;
    border-style: solid;
}

div #instructions {
    position: relative;
    width: 100%;
    height: fit-content;
    color: black;
    background-color: white;
    visibility: visible;
}

div #questions {
    position: relative;
    width: 100%;
    height: fit-content;
    color: white;
    background-color: black;
    visibility: visible;
}

div #answers {
    position: relative;
    width: 100%;
    height: fit-content;
    color: white;
    background-color: black;
    visibility: visible;
}

div #clues {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: DimGray;
}

div #timerBox {
    background-color: red;
    color: black;
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 20px;
    text-align: center;
}

div #answerFloater {
    position: absolute;
    visibility: hidden;
    top: 0px;
    left: 0px;
    background-color: blue;
}

div #eventLog {
    font-size: xx-small;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 640px;
    height: 50px;
    overflow: auto;
    overflow-style: auto;
}

Initialisieren der App

Initialisieren Sie das Objekt für Fragen und Antworten.

Hier werden globale Variablen deklariert und Verweise auf UI-Objekte abgerufen.

var _applicationData;
var _localSettings;
var _data;
var _inputBox;
var _instructions;
var _answers;
var _questions;
var _clues;
var _eventLog;
var _floater;

function initialize() {
    // Get our UI objects.
    _inputBox = document.getElementById("inputBox");
    _instructions = document.getElementById("instructions");
    _questions = document.getElementById("questions");
    _answers = document.getElementById("answers");
    _clues = document.getElementById("clues");
    _eventLog = document.getElementById("eventLog");
    _floater = document.getElementById("answerFloater");

    // Configure the target.
    setTarget();
}

Anschließend positionieren wir die Benutzeroberfläche für Fragen und Antworten und richten das Interaktionsobjekt zum Verarbeiten der Frage- und Antwortdaten aus der XML-Datei ein. Die Details zu den XML-Daten für dieses Beispiel finden Sie in der vollständigen Liste am Ende dieses Themas.

// Configure the interaction target.
function setTarget() {
    //  Set the position of the input target.
    var inputLeft = (window.innerWidth - _inputBox.clientWidth) / 2.0;
    var inputTop = (window.innerHeight - _inputBox.clientHeight) / 2.0;
    var transform = (new MSCSSMatrix()).translate(inputLeft, inputTop);
    _inputBox.style.msTransform = transform;

    // Set the position of the event log.
    transform = (new MSCSSMatrix()).translate(inputLeft, inputTop + _inputBox.clientHeight);
    _eventLog.style.msTransform = transform;

    // Associate interaction target with our input manager.
    // Scope input to clue area only.
    _clues.inputProcessor = new QandA.InputProcessor(_clues);
}

Konfigurieren Sie die Gestikerkennung.

Hier richten wir die Interaktionsverarbeitung ein.

Für die meisten Fälle wird empfohlen, Zeigerinformationen über das Ereignisargument der Zeigerereignishandler im ausgewählten Programmiersprachenframework abzurufen.

Sollte das Ereignisargument die für die App erforderlichen Zeigerdetails nicht liefern, können Sie über die Methoden getCurrentPoint und getIntermediatePoints oder die Eigenschaften currentPoint und intermediatePoints auf erweiterte Zeigerdaten des Ereignisarguments zugreifen. Wir empfehlen die Verwendung der Methoden getCurrentPoint und getIntermediatePoints, weil sie die Möglichkeit bieten, den Kontext der Zeigerdaten anzugeben.

Tipp  In diesem Beispiel ist einer Gestikerkennung nur ein Objekt zugeordnet. Falls Ihre App viele Objekte enthält, die manipuliert werden können (z. B. ein Puzzle), erwägen Sie die dynamische Erstellung einer Gestikerkennung nur, wenn die Zeigereingabe für ein Zielobjekt ermittelt wird. Die Gestikerkennung kann zerstört werden, wenn die Manipulation abgeschlossen ist. (Ein Beispiel hierfür finden Sie unter Eingabe: Beispiel für instanziierbare Gesten.) Um den Aufwand für das Erstellen und Zerstören von Gestikerkennungen zu vermeiden, erstellen Sie bei der Initialisierung einen kleinen Pool mit Gestikerkennungen, und weisen Sie sie nach Bedarf dynamisch zu.

 

Das Eingabeprozessorobjekt umfasst die Gestikerkennung (gr), die alle Zeiger- und Gestikereignisse überwacht und verarbeitet. Die Benutzeroberfläche für Fragen und Antworten wird von den Ereignishandlern der Gestikerkennung verwaltet.

// Handle gesture recognition for this sample.
(function () {
    "use strict";
    var InputProcessor = WinJS.Class.define(
    // Constructor
    function InputProcessor_ctor(target) {
        this._questionsStarted = false;
        this._tapCount = 0;
        // Create a clue manager.
        this._clueManager = new QandA.ClueManager();
        // Load xml data from file into local app settings.
        var _dataObject = new QandA.DataManager();
        _data = _dataObject.getData();

        this._questionTotal = _data.selectNodes("questions/question").length;
        this._doubleTap = false;
        this._startTime;
        this._intervalTimerId;

        // Initialize the gesture recognizer.
        this.gr = new Windows.UI.Input.GestureRecognizer();

        // Turn off visual feedback for gestures.
        // Visual feedback for pointer input is still displayed. 
        this.gr.showGestureFeedback = false;

        // Configure gesture recognizer to process the following:
        // double tap               - start questions and timer.
        // tap                      - move to next question.
        // right tap                - show answer.
        // hold and hold with mouse - start clues.
        this.gr.gestureSettings =
            Windows.UI.Input.GestureSettings.tap |
            Windows.UI.Input.GestureSettings.doubleTap |
            Windows.UI.Input.GestureSettings.rightTap |
            Windows.UI.Input.GestureSettings.hold |
            Windows.UI.Input.GestureSettings.holdWithMouse;

        //
        // Set event listeners.
        //
        // Get our context.
        var that = this;

        // Register event listeners for these gestures.
        this.gr.addEventListener('tapped', tappedHandler);
        this.gr.addEventListener("holding", holdingHandler);
        this.gr.addEventListener("righttapped", rightTappedHandler);

        // The following functions are registered to handle DOM pointer events
        //
        // Basic pointer handling to highlight input area.
        target.addEventListener("pointerover", function onPointerOver(eventInfo) {
            eventInfo.stopImmediatePropagation = true;
            _eventLog.innerText += "pointer over || ";
            eventInfo.target.style.backgroundColor = "DarkGray";
        }, false);
        // Basic pointer handling to highlight input area.
        target.addEventListener("pointerout", function onPointerOut(eventInfo) {
            eventInfo.stopImmediatePropagation = true;
            _eventLog.innerText += "pointer out || ";
            eventInfo.target.style.backgroundColor = "DimGray";
        }, false);
        // Handle the pointer move event.
        // The holding gesture is routed through this event.
        // If pointer move is not handled, holding will not fire.
        target.addEventListener("pointermove", function onPointerMove(eventInfo) {
            eventInfo.stopImmediatePropagation = true;
            // Get intermediate PointerPoints
            var pps = eventInfo.intermediatePoints;

            // Pass the array of PointerPoints to the gesture recognizer.
            that.gr.processMoveEvents(pps);
        }, false);
        // Handle the pointer down event.
        target.addEventListener("pointerdown", function onPointerDown(eventInfo) {
            eventInfo.stopImmediatePropagation = true;
            _eventLog.innerText += "pointer down || ";

            // Hide the floater if visible.
            _floater.style.visibility = "hidden";

            // Get the PointerPoint for the pointer event.
            var pp = eventInfo.currentPoint;

            // Get whether this pointer down event is within
            // the time threshold for a double tap.
            that._doubleTap = that.gr.canBeDoubleTap(pp);

            // Pass the PointerPoint to the gesture recognizer.
            that.gr.processDownEvent(pp);
        }, false);
        // Handle the pointer up event.
        target.addEventListener("pointerup", function onPointerUp(eventInfo) {
            eventInfo.stopImmediatePropagation = true;
            _eventLog.innerText += "pointer up || ";

            // Get the current PointerPoint
            var pp = eventInfo.currentPoint;

            // Pass the PointerPoint to the gesture recognizer.
            that.gr.processUpEvent(pp);
        }, false);

        // The following functions are registered to handle gesture events.
        //
        // This handler processes taps and double taps.
        // Potential double taps are identified in the pointer down handler.
        function tappedHandler(evt) {
            // Single tap and questions started: Display next question.
            if (!that._doubleTap && that._questionsStarted) {
                _eventLog.innerText += "tapped || ";
                _instructions.innerText = "Double tap to stop questions.";
                _clues.innerText = "";
                that._tapCount++;
                that._clueManager.tapCount = that.tapCount;
                if (that._tapCount > that._questionTotal) {
                    _questions.innerText = "No more questions.";
                } else {
                    var xpath = "questions/question[" + (that._tapCount % (that._questionTotal + 1)) + "]/q";
                    // Read data from a simple setting
                    _questions.innerText = _data.selectSingleNode(xpath).innerText;
                }
            }
                // Single tap and questions not started: Don't do much.
            else if (!that._doubleTap && !that._questionsStarted) {
                _eventLog.innerText += "tapped || ";
                _instructions.innerText = "Double tap to start questions.";
            }
                // Double tap and questions not started: Display first question.
            else if (that._doubleTap && !that._questionsStarted) {
                _eventLog.innerText += "double-tapped || ";
                // Return if last question displayed.
                if (that._tapCount > that._questionTotal) {
                    _questions.innerText = "No more questions.";
                    return;
                }
                // Start questions.
                that._questionsStarted = true;
                _instructions.innerText = "Starting questions (double tap to stop questions).";

                // Question number is based on tap count.
                that._tapCount++;

                // Select question from XML data object.
                var xpath = "questions/question[" + (that._tapCount % (that._questionTotal + 1)) + "]/q";
                _questions.innerText = _data.selectSingleNode(xpath).innerText;

                // Display a basic timer once questions started.
                that._startTime = new Date().getTime();
                that._intervalTimerId = setInterval(displayTimer, 100);
            }
                // Double tap and questions started: Stop questions and timer.
            else if (that._doubleTap && that._questionsStarted) {
                _eventLog.innerText += "double-tapped || ";
                _instructions.innerText = "Questions stopped (double tap to start questions).";
                that._questionsStarted = false;
                clearInterval(that._intervalTimerId);
            }
        };

        // For this app, we display a basic timer once questions start.
        // In a more robust app, could be used for achievements.
        function displayTimer() {
            var x = new Date().getTime();
            timerBox.innerText = (x - that._startTime) / 1000;
        }

        // This handler processes right taps.
        // For all pointer devices a right tap is fired on
        // the release of a press and hold gesture.
        // For mouse devices, righttapped is also fired on a right button click.
        // For pen devices, 
        function rightTappedHandler(evt) {
            if (!that._questionsStarted) {
                return;
            }
            var transform = (new MSCSSMatrix()).
                translate(
                (window.innerWidth - _inputBox.clientWidth) / 2.0 + evt.position.x,
                (window.innerHeight - _inputBox.clientHeight) / 2.0 + evt.position.y);
            _floater.style.visibility = "visible";
            _floater.style.msTransform = transform;
            eventLog.innerText = "right-tap || ";
        }

        // The pointer move event must also be handled because the 
        // holding gesture is routed through this event.
        // If pointer move is not handled, holding will not fire.
        // A holding event is fired approximately one second after 
        // a pointer down if no subsequent movement is detected.
        function holdingHandler(evt) {
            if (!that._questionsStarted)
                return;
            if (evt.holdingState == Windows.UI.Input.HoldingState.started) {
                _eventLog.innerText += "holding || ";
                // Create a clue manager.
                that._clueManager.tapCount = that._tapCount;
                // Start displaying clues.
                that._clueManager.displayClues();
            } else if (evt.holdingState == Windows.UI.Input.HoldingState.completed) {
                that._clueManager.destroy();
                _eventLog.innerText += "holding completed || ";
            } else {
                _eventLog.innerText += "holding canceled || ";
            }
        }
    },
    {},
    {});

    WinJS.Namespace.define("QandA", {
        InputProcessor: InputProcessor
    });
})();

Abschließend erfolgt die Konfiguration des Hinweis-Managers, der während der Gedrückthaltebewegung eine Reihe von Hinweisen basierend auf der aktuellen Frage anzeigt.

// Handle data for this sample.
(function () {
    "use strict";
    var ClueManager = WinJS.Class.define(
    // Constructor
    function ClueManager_ctor() {
        this._clueTimerId = null;
    },
    {
        displayClues: function () {
            var clue;
            var clueCount = 0;
            var clueCollection = _data.selectNodes("questions/question[" + this.tapCount + "]/clues/clue");

            this._clueTimerId = setInterval(function () {
                clueCount++;

                if (clueCount > clueCollection.length) {
                    _clues.innerText += "\nNo more clues.";
                    clearInterval(_clueTimerId);
                    return;
                }

                if (clueCount == 1)
                    clue = clueCollection.first();

                _clues.innerText += "\n" + clue.current.innerText;
                clue.moveNext();
            }, 2000);
        },
        destroy: function () {
            clearInterval(this._clueTimerId);
        },
        tapCount: {
            get: function () {
                return this._tapCount;
            },
            set: function (tapCount) {
                this._tapCount = tapCount;
            }
        }
    },
    {});

    WinJS.Namespace.define("QandA", {
        ClueManager: ClueManager
    });
})();

Links zu komplexeren Beispielen finden Sie weiter unten unter "Verwandte Themen".

Vollständiges Beispiel

Informationen hierzu finden Sie unter Statische Gesten (vollständiger Code).

Zusammenfassung und nächste Schritte

In dieser Schnellstartanleitung haben Sie gelernt, wie statische Gestikereignisse in Windows Store-Apps mit JavaScript behandelt werden.

Die Erkennung von Basisgesten, kombiniert mit Zeigerereignissen, eignet sich gut für die Kontrolle einfacher Interaktionen wie Tippen, Doppeltippen, Gedrückthalten und Rechtstippen.

Ein komplexeres Beispiel für die Behandlung von Gesten finden Sie unter Eingabe: Beispiel für instanziierbare Gesten.

Hinweis  Dieses Beispiel entspricht nicht den Richtlinien der Windows-Sprache für die Fingereingabe bei benutzerdefinierten Interaktionen. Einige statische Gesten wurden zu Vorführungszwecken neu definiert.

 

Informationen zur Behandlung aufwendigerer Manipulationsinteraktionen (z. B. Ziehen, Streifen, Drehen, Zusammendrücken und Aufziehen), um eine vollständig angepasste Umgebung für Benutzerinteraktionen bereitzustellen, finden Sie unter Schnellstart: Manipulationsgesten.

Weitere Informationen zur Windows-Sprache für die Fingereingabe finden Sie unter Design für Interaktion per Fingereingabe.

Verwandte Themen

Entwickler

Reaktion auf Benutzerinteraktionen

Entwickeln von Windows Store-Apps (JavaScript und HTML)

Schnellstart: Zeiger

Schnellstart: DOM-Bewegungen und -Bearbeitung

Schnellstart: Manipulationsgesten

Designer

Design für Interaktion per Fingereingabe