Eventi gesti

Gli eventi gesto sono basati sul modello W3C Pointer Events. Puoi usare gli eventi gesto per riconoscere e rispondere a interazioni utente più complesse basate sul tocco (come l'avvicinamento delle dita, la rotazione, lo scorrimento rapido e il trascinamento) senza catturare e interpretare personalmente i singoli eventi puntatore.

Nota  Le API illustrate in questa sezione non sono supportate in Windows 7 o versioni precedenti.

Eventi gesto e oggetto MSGesture

La prima cosa da fare per gestire i gesti nel tuo sito consiste nel creare un'istanza di un oggetto gesture.


var myGesture = new MSGesture();

Devi quindi assegnare all'oggetto gesture un elemento di destinazione, ovvero l'elemento per cui il browser deve generare gli eventi gesto. Tale elemento determina anche lo spazio di coordinate per gli eventi.


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

Infine, devi indicare all'oggetto gesture i puntatori da elaborare nell'ambito del riconoscimento dei gesti.


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

Nota  Usa la proprietà CSS (Cascading Style Sheets) touchAction per configurare l'elemento in modo che fornisca eventi puntatore per l'input anziché eseguire le azioni tocco predefinite, come panoramica e zoom. Per ulteriori informazioni, vedi Controllo dell'esperienza di tocco predefinita.

Gestione degli eventi gesto

Quando un oggetto gesto ha una destinazione valida e almeno un puntatore associato, inizia a generare eventi gesto. L'oggetto MSGestureEvent inviato alla generazione di tali eventi contiene information sulla scala (avvicinamento delle dita), sulla rotazione, sulla traslazione e sulla velocità. La relativa proprietà detail contiene informazioni aggiuntive sullo stato dell'evento gesto, sotto forma di maschera di bit di flag.

Flag del gestoValoreDescrizione
MSGESTURE_FLAG_NONE0Stato normale.
MSGESTURE_FLAG_BEGIN1Inizio dell'evento gesto.
MSGESTURE_FLAG_END2Fine dell'evento gesto.
MSGESTURE_FLAG_CANCEL4Annullamento dell'evento gesto. Viene spesso utilizzato insieme a MSGESTURE_FLAG_END con un operatore AND.
MSGESTURE_FLAG_INERTIA8Fase di inerzia del gesto. Questo flag viene continuamente inviato tramite un evento MSGestureChange mentre l'elemento si sposta sullo schermo.

 

Per altre info, vedi la sezione "Osservazioni" della guida di riferimento a Gesture flags.

Gesti semplici e complessi

Gli eventi gesto possono essere semplici (come un tocco o una pressione prolungata) o complessi (come un avvicinamento delle dita, una rotazione o uno scorrimento rapido).

Tocco

Il gesto di base per il riconoscimento è il tocco. Quando viene rilevato un tocco, viene generato un evento MSGestureTap per l'elemento di destinazione dell'oggetto gesto. Diversamente dall'evento click, il gesto tocco viene generato solo quando un utente preme il dito (oppure preme un pulsante del mouse o tocca lo schermo con una penna) e quindi lo solleva senza spostarlo. Questa differenza consente di distinguere il tocco dal trascinamento dell'elemento.

Pressione prolungata

Viene rilevato un gesto di pressione prolungata quando l'utente tocca lo schermo con un dito, lo tiene fermo per un momento quindi lo solleva senza spostarlo. Durante un'interazione di pressione prolungata l'evento MSGestureHold viene generato più volte per i vari stati del gesto:


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.
}
}


Gesti complessi (avvicinamento delle dita, rotazione, scorrimento rapido e trascinamento)

I gesti dinamici, come avvicinamento delle dita e rotazione, vengono segnalati come trasformazioni, analogamente a quanto avviene per le trasformazioni 2D CSS. Per i gesti dinamici vengono generati tre eventi: MSGestureStart, MSGestureChange (viene venerato ripetutamente durante il gesto) e MSGestureEnd.

Poiché i gesti dinamici vengono segnalati come trasformazioni, puoi usare MSGesture con le trasformazioni 2D CSS per manipolare un elemento quale una foto o una tessera di un puzzle. Per abilitare il ridimensionamento, la rotazione e il trascinamento di un elemento puoi usare codice simile al seguente:


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
}


I gesti dinamici come il ridimensionamento e la rotazione con il mouse vengono eseguiti girando la rotellina del mouse mentre si preme rispettivamente il tasto modificatore CTRL o SHIFT.

Informazioni sull'inerzia

L'inerzia è un movimento che continua al termine del contatto con lo schermo. Il supporto dell'inerzia è incorporato negli oggetti gesture e non richiede codice aggiuntivo, oltre ai gestori degli eventi. A seconda della velocità dello scorrimento rapido, l'evento MSInertiaStart è seguito da una serie di eventi MSGestureChange, prima che venga generato un evento MSGestureEnd. L'evento MSInertiaStart viene generato solo quando la velocità è sufficiente per uno scorrimento rapido e consente al codice di distinguere tra un movimento lento e un gesto rapido.

Informazioni di riferimento sulle API

MSGesture
MSGestureEvent
MSManipulationEvent

Esempi ed esercitazioni

Come esplorare l'insieme di Mandelbrot usando HTML5
Come simulare il passaggio del mouse su dispositivi abilitati per il tocco
Come usare Canvas, SVG e multitocco per creare un gioco di tipo puzzle in sezioni
Preparare il sito per l'input di tocco
Esempio di puntatori e gesti

Dimostrazioni di Internet Explorer Test Drive

Mandelbrot Explorer
Superficie del browser
Touch Effects
Brick Breaker

Post di IEBlog

IE11: Touch Browsing for Today’s Web and Beyond
Eventi puntatore interoperabili: evoluzione degli eventi di input per più dispositivi
Andare oltre la panoramica, lo zoom e il tocco con gli eventi gesto
Linee guida per la creazione di siti sensibili al tocco
Handling Multi-touch and Mouse Input in All Browsers
Touch Input for IE10 and Windows Store apps

Argomenti correlati

Creating an universal virtual touch joystick working for all Touch models thanks to Hand.JS
Hand.js: polyfill per il supporto di eventi puntatore su tutti i browser
Eventi puntatore
Scorrimento e zoom con il tocco

 

 

Mostra:
© 2014 Microsoft