Come simulare l’evento Hover su dispositivi touchscreen

Come simulare l’evento Hover su dispositivi touchscreen

La progressiva diffusione di smartphone e tablet ha portato gli sviluppatori Web ad abbandonare modelli di navigazione tradizionali, poiché in presenza di touchscreen scompare l’evento Hover e ciascun tocco viene interpretato direttamente come click.

di pubblicato il nel canale Web
 

Simulare l'evento Hover

Fino a qualche anno fa, la maggioranza dei siti Web proponeva un sistema di navigazione a più livelli organizzati ad albero, accessibili tramite un complesso sistema di menu a scomparsa.


Fig. 1 Esempio di menu multilivello, fonte: www.bluxis.it

La comparsa e scomparsa dei vari livelli viene regolata dall’evento Hover generato dal browser quando il puntatore del mouse si trova sopra un blocco HTML. In caso di evento Hover vengono eseguite le regole CSS impostate come :hover e viene lanciata l’eventuale funzione JavaScript registrata sull’evento onMouseOver.

Con la progressiva diffusione di smartphone e altri device dotati di touchscreen, gli sviluppatori Web hanno via via abbandonato questo modello di navigazione, poichè in presenza di touchscreen scompare l’evento Hover e ciascun tocco viene interpretato direttamente come click.

Adeguare un sito ai nuovi modelli di navigazione spesso non è un lavoro banale, ma richiede un ripensamento generale dell’organizzazione dei contenuti del sito Web. Per questo motivo, in una iniziale fase di transizione, è possibile inserire una piccola modifica che consente di “simulare” l’evento hover sui dispositivi touch, lasciando inalterato il comportamento su quelli dotati di mouse.

La proprietà DOM chiamata aria-haspopup viene riconosciuta da Internet Explorer 10 e usata per attivare il meccanismo di simulazione dell’hover in questo modo:


<style>
#hovermenu li ul {
display: none;
}
#hovermenu li:hover ul{
display: block;
}
</style>
<ul id="hovermenu">
      <li><a href="/news/" aria-haspopup="true">News Categories</a>
            <ul>
                  <li><a href="/news/top">Top Stories</a></li>
                  <li><a href="/news/technology">Technology</a></li>
                  <li><a href="/news/sports">Sports</a></li>
                  <li><a href="/news/finance">Finance</a></li>
            <ul>
      </li>
</ul>
 

Quando tale codice viene eseguito su un dispositivo touch, il primo tocco viene interpretato come Hover, eseguendo quindi la regola CSS li:hover, mentre il secondo tocco (sullo stesso blocco) viene interpretato come click. Un tocco fuori dall’area provvede a disattivare l’hover.

Questa escamotage può essere usata per “mettere una pezza” in quei siti che attendono una fase di ristrutturazione, per garantire la corretta navigazione dei contenuti anche sui moderni PC e Tablet dotati di Windows 8 e Internet Explorer 10. La prossima versione di IE, invece, avrà il supporto integrato per la simulazione dell’evento hover.

Per ulteriori approfondimenti, si consiglia la lettura di questo documento contente le specifiche, le definizioni ARIA e ovviamente le raccomandazioni W3C riguardo l’accessibilità dei siti Web.
 
7 Commenti
Gli autori dei commenti, e non la redazione, sono responsabili dei contenuti da loro inseriti - info
illidan200030 Agosto 2013, 11:49 #1
ovviamente la funzione javascript onMouseHover non esiste... esiste invece onMouseOver
appunto il mouse è sopra (over in inglese) all'elemento. onMouseHover mi pare sia una qualche funzione .Net
II ARROWS30 Agosto 2013, 11:52 #2
Carino...
TheKaneB30 Agosto 2013, 12:29 #3

typo

@illidan2000:

Hai ragione, ho fatto involontariamente un mix di .Net (Control.OnMouseHover) e JavaScript :/

Grazie per la segnalazione!

Antonio
Unrealizer30 Agosto 2013, 12:58 #4
E pensare che il sito della mia università (UNIPA, dovresti conoscerla anche tu, Antonio ) è passato quest'anno dal vecchio menu a un menu di questo tipo, adesso è impossibile usarlo con lo smartphone

Comunque, su IE11 funziona anche con il touch: credo che tenendo il dito premuto venga comunque lanciato l'evento onMouseOver

Purtroppo non so una fava di JS, altrimenti proverei di persona
TheKaneB30 Agosto 2013, 15:42 #5
@Unrealizer:

Sì, sono passati un po' di anni ormai da UNIPA
Come dicevo nell'articolo: " La prossima versione di IE, invece, avrà il supporto integrato per la simulazione dell’evento hover."

pirlano02 Settembre 2013, 15:46 #6
Oppure se uno sviluppatore ha un briciolo di cervello, lascia l'hover, ma invece di lasciare un link vuoto (# per esempio), permette anche il click diretto (anche da computer), per la selezione tramite l'apertura di una nuova pagina (o solo una sezione di essa, vedi Ajax) dei sotto menù.
Tra l'altro anche usando 2 principi in croce di ingegneria del software, l'utente medio, difficilmente riesce a seguire il flusso di un menu a tendina e sotto-tendina, spesso poi non viene neanche immesso un timeout al onMouseOut per cui appena il mouse esce dalla tendina sparisce tutto, e più che una semplice selezione diventa un gioco di bravura...
TheKaneB02 Settembre 2013, 22:19 #7
@piriano: sono assolutamente d'accordo con te, ma a volte capita di dover mettere mano a progetti iniziati da altri e quindi "a danno ormai avvenuto" si possono usare queste tecniche, chiamiamoli anche "fix temporanei" in attesa di una riprogettazione più razionale della navigazione dei contenuti secondo criteri più moderni di UI.

Devi effettuare il login per poter commentare
Se non sei ancora registrato, puoi farlo attraverso questo form.
Se sei già registrato e loggato nel sito, puoi inserire il tuo commento.
Si tenga presente quanto letto nel regolamento, nel rispetto del "quieto vivere".

La discussione è consultabile anche qui, sul forum.
 
^