Informazioni
L'argomento richiesto è visualizzato di seguito, ma non è incluso in questa libreria.

Eventi puntatore e gesto in Internet Explorer 10

Nota  Per una panoramica più aggiornata di questi argomenti, vedi Eventi puntatore ed Eventi gesto.

Attenzione  La specifica Pointer Events W3C è stata sottoposta a diverse revisioni a partire dalla sua implementazione in Internet Explorer 10. Inoltre, i prefissi fornitore MS per le API degli eventi puntatore sono deprecati a partire da Internet Explorer 11. Vedi Aggiornamenti degli eventi puntatore per un riepilogo delle modifiche e best practice di compatibilità.

Internet Explorer 10 e le app di Windows Store scritte con JavaScript per Windows 8 introducono nella piattaforma Web il supporto per la gestione dell'input tocco e penna. Invece di richiedere la creazione di codice che gestisca separatamente ciascun tipo di input, Internet Explorer 10 si basa sul concetto di puntatore.

Un puntatore è un qualsiasi punto di contatto sullo schermo. Può trattarsi di un mouse, di un dito o di una penna. Puoi ora garantire un'esperienza uniforme indipendentemente dall'hardware di input e dai fattori di forma scrivendo in un singolo set di eventi puntatore che incapsulano l'input effettuato tramite mouse, tocco e penna.

Eventi puntatore

Analogamente agli eventi mouse, gli eventi puntatore vengono attivati con un movimento verso il basso, verso l'alto, sopra, all'esterno e con uno spostamento per ogni puntatore:

A differenza di quanto accade con un mouse, sullo schermo possono essere presenti contemporaneamente più puntatori, ad esempio usando un dispositivo multitocco. In questi scenari, si attiva un evento puntatore distinto per ogni punto di contatto, semplificando la creazione di siti e applicazioni multitocco.

Annullamento di un puntatore

Quando si usa l'input penna o tocco, è talvolta possibile annullare i puntatori sullo schermo. Se, ad esempio, lo schermo non supporta più di due punti tocco simultanei e si aggiunge un terzo dito sullo schermo, uno degli altri punti verrà annullato poiché l'hardware non è in grado di rilevare tre punti. L'annullamento del puntatore è indicato dall'evento MSPointerCancel.

Compatibilità del mouse

Dopo aver generato gli eventi del puntatore, Internet Explorer 10 genera gli eventi mouse per il punto di contatto principale, ad esempio il primo dito sullo schermo. Ciò consente ai siti Web basati sugli eventi del mouse esistenti di continuare a funzionare.

Rilevamento funzionalità

Ecco il modo migliore per rilevare il supporto per gli eventi puntatore:


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

Tieni presente che il rilevamento della funzionalità non indica che il dispositivo supporta l'input penna o tocco. Al contrario, indica che la piattaforma genererà eventi puntatore indipendentemente dall'hardware presente nel sistema.

L'esempio seguente è un'app per la pittura con le dita di base che funziona con mouse, tocco e penna tramite eventi puntatore.


<!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>


Procedure comuni per l'ottimizzazione del tocco

Internet Explorer 10 fornisce funzionalità di gestione predefinite comuni per le interazioni tocco di base, ad esempio:

  • Panoramica per le aree scorrevoli
  • Zoom con avvicinamento delle dita
  • Menu di scelta rapida con pressione prolungata
  • Selezione tocco

Queste funzionalità operano automaticamente in modo da offrire a siti e app un'esperienza tocco ottimale per impostazione predefinita. Tuttavia, potresti volerle disabilitare a favore di un'esperienza personalizzata.

Test del supporto per il tocco

La proprietà msMaxTouchPoints consente di testare facilmente le funzionalità di tocco e l'eventuale supporto del multitocco. Per controllare se un dispositivo è in grado di supportare il tocco e, in tal caso, quanti punti può supportare, usare:

// 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;


Panoramica e zoom

Gli eventi puntatore non verranno generati durante l'esecuzione di una panoramica o di uno zoom. In scenari come quello dell'esempio dell'applicazione di pittura precedente, le funzionalità di panoramica e zoom vengono disabilitate in un'area per usare tali eventi per altre finalità. A tale scopo si usa CSS (Cascading Style Sheets), ad esempio.


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

Selezione tocco

In Internet Explorer 10 puoi selezionare una parola con il tocco toccando il testo o l'area accanto ad esso. Se vuoi disabilitare la selezione di testo, procedi come in Windows Internet Explorer 9.


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


Menu di scelta rapida

La pressione prolungata di determinati elementi in Windows Internet Explorer mostra un elemento visivo che indica che verrà visualizzato un menu di scelta rapida. Se sollevi il dito, viene visualizzato il menu di scelta rapida. Se allontani il dito, l'elemento visivo scompare e il menu di scelta rapida non viene visualizzato.

Se vuoi usare un menu di scelta rapida personalizzato, puoi farlo con Internet Explorer 10. È sufficiente chiamare event.preventDefault sull'evento contextmenu ed eseguire il codice per visualizzare il menu di scelta rapida. Internet Explorer abilita automaticamente il menu di scelta rapida per il funzionamento con il tocco e visualizza lo stesso suggerimento visivo durante la pressione prolungata sull'elemento. Questo esempio usa un evento contextmenu per rilevare quando l'utente tiene premuto un elemento. Quando l'utente solleva il dito, viene generato l'evento contextmenu e viene visualizzato un messaggio.


<!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>


Se non vuoi visualizzare un menu di scelta rapida, ad esempio in un gioco che richiede che l'utente tenga premuto un dito per un periodo di tempo più prolungato, potrai disabilitare sia il menu di scelta rapida predefinito che il suggerimento visivo. A tale scopo è sufficiente annullare i due eventi.



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

Eventi gesti e oggetto gesture

Oltre agli eventi puntatore, Windows 8 è in grado di riconoscere interazioni complesse denominate gesti (avvicinamento delle dita, scorrimento rapido e così via) in modo coerente tra le applicazioni.

Nota  Le API descritte in questa sezione non sono supportate in Windows 7.

L'oggetto MSGesture usato nell'esempio precedente consente di abilitare in modo semplice gesti di livello superiore quali pressione prolungata, panoramica e tocco senza acquisire manualmente ogni evento puntatore. È tuttavia necessario acquisire l'evento onmspointerdown e configurare l'oggetto MSGesture con la destinazione (l'oggetto da cui desideri eventi gesti) e pointerId. Senza la creazione di un'istanza dell'oggetto MSGesture e la relativa configurazione, l'elemento genererà soltanto eventi puntatore.

Gli eventi gesti incorporano informazioni aggiuntive rispetto ai semplici eventi puntatore. Ad esempio, quando un utente tocca e rimuove immediatamente il dito, viene generato un evento MSGestureTap. Se l'utente tocca la superficie e mantiene il dito appoggiato, viene generato un evento MSGestureHold.

Quando l'utente fa scorrere il dito, vengono generati gli eventi MSGestureStart, MSGestureChange e MSGestureEnd.

Se l'utente fa scorrere rapidamente il dito e lo solleva, viene generato un evento MSInertiaStart.

Nota  Puoi individuare quando un gesto è nella fase di inerzia quando la proprietà detail dell'evento MSGestureChange è uguale a evento.MSGESTURE_FLAG_INERTIA.

L'inerzia è un movimento che continua dopo la rimozione del contatto con lo schermo. Il supporto dell'inerzia è incorporato negli oggetti gesture in Internet Explorer 10 e non richiede codice aggiuntivo rispetto 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.

Ecco i principali eventi gesti:

L'oggetto MSGestureEvent passato a ogni evento restituisce proprietà che consentono all'app di determinare lo stato dell'oggetto manipolato. Per verificare se l'utente ha provato a eseguire lo zoom o il ridimensionamento dell'elemento, usa la proprietà scale. Se l'utente ruota l'elemento sullo schermo, puoi ottenere l'angolo in radianti con la proprietà rotation. Entrambe queste proprietà corrispondono a modifiche apportate dopo l'ultimo MSGestureEvent.

Flag dei gesti

I flag MSGesture restituiscono lo stato di un oggetto evento, come MSGestureStart, MSGestureChange o MSGestureHold. Ecco quali sono:

  • MSGESTURE_FLAG_NONE: nessuno stato speciale.
  • MSGESTURE_FLAG_BEGIN: contrassegna l'inizio di un evento gesto.
  • MSGESTURE_FLAG_END: contrassegna la fine di un evento gesto.
  • MSGESTURE_FLAG_CANCEL: contrassegna l'annullamento dell'evento gesto.
  • MSGESTURE_FLAG_INERTIA : contrassegna quando il computer è nella fase di inerzia.

Ad esempio, se un utente scorre rapidamente il dito sullo schermo, la risposta degli eventi e dei dettagli sarà la seguente:

  • Viene generato l'evento MSGestureStart con il flag MSGESTURE_FLAG_BEGIN.
  • Mentre l'utente sposta il dito, viene generato ripetutamente l'evento MSGestureChange e viene passato il flag MSGESTURE_FLAG_NONE tramite la proprietà detail.
  • Quando l'utente solleva il dito, viene generato l'evento MSInertiaStart passando il flag MSGESTURE_FLAG_INERTIA.
  • Fintanto che l'elemento si sposta sullo schermo, continua a essere generato l'elemento MSGestureChange e viene passato il flag MSGESTURE_FLAG_INERTIA.
  • Quando il movimento termina, viene generato l'evento MSGestureEnd e con la proprietà detail vengono passati due flag, MSGESTURE_FLAG_INERTIA e MSGESTURE_FLAG_END.

Se un utente tocca lo schermo tenendo premuto per alcuni secondi e quindi sposta il dito, gli eventi e i dettagli saranno i seguenti:

  • Dopo alcuni secondi, viene generato l'evento MSGestureHold passando il flag MSGESTURE_FLAG_BEGIN.
  • Quando l'utente inizia a spostare il dito, viene generato l'evento MSGestureHold passando i flag MSGESTURE_FLAG_END e MSGESTURE_FLAG_CANCEL. Questo segnala che la pressione prolungata è stata annullata.
  • Mentre l'utente sposta il dito, viene generato ripetutamente l'evento MSGestureChange e viene passato il flag MSGESTURE_FLAG_NONE tramite la proprietà detail. A questo punto, i passaggi continuano come nella sequenza precedente.
  • Quando l'utente solleva il dito, viene generato l'evento MSInertiaStart passando il flag MSGESTURE_FLAG_INERTIA.
  • Fintanto che l'elemento si sposta sullo schermo, continua a essere generato l'elemento MSGestureChange e viene passato il flag MSGESTURE_FLAG_INERTIA.
  • Quando il movimento termina, viene generato l'evento MSGestureEnd e con la proprietà detail vengono passati due flag, MSGESTURE_FLAG_INERTIA e MSGESTURE_FLAG_END.

Per un'app di esempio completa che mostri gli eventi gesti in azione, vedi l'argomento di riferimento MSGesture.

Argomenti correlati

Eventi gesti
Eventi puntatore

 

 

Mostra:
© 2014 Microsoft