Funzionalità per la gestione adattiva degli input

Il modello di evento puntatore in Internet Explorer 10 consente di gestire agevolmente tutti i tipi di input con mouse, penna, tocco e multitocco mediante la scrittura in un singolo set di eventi. Analogamente agli eventi mouse, gli eventi puntatore vengono generati con eventi di tipo down, move, up, over, e out per ogni puntatore. Il supporto di base per il tocco nella maggior parte dei siti dovrebbe "funzionare semplicemente" senza la necessità di modifiche per un paio di motivi.

  • Internet Explorer 10 offre funzionalità predefinite comuni per la gestione di interazioni di tocco di base, ad esempio lo scorrimento di aree di contenuto, lo zoom con doppio tocco e avvicinamento delle dita, la selezione con tocco e i menu di scelta rapida visualizzati con la pressione prolungata del dito. Queste funzionalità operano automaticamente in modo da offrire a siti e app un'esperienza di tocco ottimale per impostazione predefinita.
  • 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 mouse esistenti di continuare a funzionare.

Per informazioni di base sulle strategie e la risoluzione di problemi relativamente alla progettazione compatibile con il tocco, vedi la guida introduttiva su come preparare il sito per le interazioni con tocco. Per ottimizzare il sito per il tocco senza rinunciare al supporto per mouse e tastiera, Internet Explorer 10 offre le funzionalità per la gestione adattiva degli input descritte in questo articolo.

Rilevamento del tocco

Internet Explorer 10 offre la proprietà msMaxTouchPoints per verificare il supporto hardware del tocco e del multitocco lato client:


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

Per il rilevamento delle funzionalità di tocco lato server, Internet Explorer 10 fornisce il token della stringa agente utente"Touch". Una volta confermato il supporto del tocco, è possibile controllare pointerType nell'evento MSPointerDown per rilevare quando l'utente usa il tocco:


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

Simulazione del passaggio del mouse per il tocco

Nella modalità di esplorazione basata sul tocco non esiste un equivalente del passaggio del mouse su un elemento di una pagina Web. Pertanto, eventuali azioni o contenuti che si attivano al passaggio del mouse risulterebbero potenzialmente inaccessibili agli utenti che usano il tocco. Uno scenario comune che presenta questo problema è rappresentato dai sottomenu attivati al passaggio del mouse. La soluzione migliore per evitare questo problema consiste nel non usare il passaggio del mouse per nascondere contenuto con cui può interagire l'utente. Usa invece l'evento onclick per attivare o disattivare la visibilità. In alternativa, puoi usare un nuovo comportamento aggiunto alla proprietà aria-haspopup esistente in Internet Explorer 10 proprio per simulare il passaggio del mouse su elementi della pagina con contenuti interattivi nascosti:


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


Per ulteriori informazioni, vedi Uso della proprietà aria-haspopup per simulare il passaggio del mouse sui dispositivi abilitati al tocco.

Impostazione e override dei comportamenti di tocco

Per impostazione predefinita, Internet Explorer 10 utilizza spostamenti, avvicinamenti delle dita e doppi tocchi e non invia eventi per queste interazioni. Puoi usare la proprietà CSS -ms-touch-action  per eseguire l'override di queste impostazioni predefinite e specificare i comportamenti delle azioni di tocco consentiti per il sito. In questa tabella sono descritti i valori possibili.

ValoreDescrizione

auto

Valore iniziale. Il browser determina il comportamento dell'elemento.

none

L'elemento non ammette comportamenti di tocco predefiniti.

pan-x

L'elemento ammette lo scorrimento guidato dal tocco sull'asse orizzontale.

pan-y

L'elemento ammette lo scorrimento guidato dal tocco sull'asse verticale.

pinch-zoom

L'elemento ammette lo zoom mediante l'avvicinamento delle dita.

manipulation

L'elemento consente lo scorrimento guidato dal tocco e lo zoom mediante l'avvicinamento delle dita. (Equivalente a sintassi abbreviata di "pan-x pan-y pinch-zoom").

double-tap-zoom

L'elemento consente lo zoom con doppio tocco.

inherit

L'elemento eredita il valore di -ms-touch-action-dal relativo elemento padre.

 

Per il controllo dettagliato dello zoom e dello scorrimento/panoramica, dell'elemento abilitato per il tocco, esistono numerose nuove proprietà che consentono di effettuare operazioni quali l'impostazione di limiti allo zoom e allo scorrimento, l'impostazione di punti di aggancio di zoom e scorrimento e il blocco dell'asse del movimento di scorrimenti o di permettere lo scorrimento libero e così via. Inoltre, per controllare gli elementi selezionabili nella pagina, puoi usare -ms-user-select, che funziona allo stesso modo per tutti i tipi di input.

Guida per lo sviluppatore Scorrimento e zoom, Impostazione del testo selezionabile
EsempiEsempio di scorrimento, panoramica e zoom con input tocco, Esempio di selezione utente CSS
Riferimento Tocco: zoom e scorrimento -ms-user-select

 

Modello degli eventi puntatore

Internet Explorer 10 offre un modello di eventi puntatore che consente di gestire facilmente tutti gli input con mouse, penna, tocco e multitocco in un formato astratto denominato puntatore. Gli eventi per l'acquisizione dell'input puntatore generico e le proprietà di questi eventi sono analoghi a quelli usati per il mouse (ad esempio down, move, up, over e out), con il supporto aggiuntivo per altre forme di input e l'aggiunta di più puntatori. Per suggerimenti sulla gestione di input con multitocco e mouse in altri browser, consulta il blog dedicato a IE.

Diagramma concettuale che illustra il modello di eventi puntatore: tre sfere ("penna," "tocco" e "mouse") entrano in un imbuto uscendone sotto forma di "puntatore."
Guida per lo sviluppatore Eventi puntatore e gesti
Dimostrazioni Effetti di tocco, Lasso Birds, Love is in the Air, Irish Spring
Esempio Come usare Canvas, SVG e multitocco per creare un gioco di tipo puzzle in sezioni
Riferimento Eventi

 

Modello degli eventi di movimento

Per realizzare esperienze di tocco più avanzate, Internet Explorer 10 offre il modello di eventi di movimento che consente di gestire interazioni utente più complesse.

Guida per lo sviluppatore Eventi puntatore e di movimento
DimostrazioniBrowser Surface, Touch Effects, Lasso Birds, Love is in the Air, Irish Spring
Esempio Come usare Canvas, SVG e multitocco per creare un gioco di tipo puzzle in sezioni
Riferimento Eventi

 

Moduli HTML5 compatibili con il tocco

In Internet Explorer 10 è stato introdotto il supporto per i controlli di input HTML5, i quali sono tutti ottimizzati per il tocco. Ecco alcuni dei miglioramenti correlati al tocco:

  • Sequenze di controlli di selezione tramite tutte le opzioni per consentire lo scorrimento continuo
  • Caselle di immissione testo con pulsante di cancellazione completa
  • Sottoaree scorrevoli della pagina funzionanti con il tocco
  • Controllo range per offrire feedback continuo del valore selezionato
  • Pulsanti e collegamenti per l'annullamento di un clic con tocco allontanandosi dalla destinazione
  • Pulsanti di opzione e caselle di controllo facili da selezionare con tocco anche sulle relative etichette
  • Descrizioni comando di dimensioni maggiori e visualizzate a distanza meno ravvicinata quando si tocca un collegamento rispetto al clic del mouse

Per l'immissione di testo è possibile migliorare ulteriormente le esperienze di tocco degli utenti identificando tipi specifici di input quali indirizzi di posta elettronica, numeri di telefono o URL. In Windows 8 Internet Explorer 10 mostra un layout di tastiera virtuale specifico per il tipo di input.

Guida per lo sviluppatore Moduli HTML5
DimostrazioniControlli progettati per l'uso del tocco come opzione preferenziale
EsempiEsempio di controlli di modulo

 

Argomenti correlati

Progettare siti Web adattivi
Funzionalità per i layout adattivi

 

 

Mostra:
© 2014 Microsoft