Alternativa preferita a OnMouseOver per il touch

Esiste un’alternativa o una procedura consigliata per la gestione degli eventi javascript OnMouseOver sui dispositivi touch? Tutto quello che posso pensare è di convertire tutti gli eventi in OnMouseClick. Sfortunatamente questo confonde le differenze tra gli eventi innescati dal passaggio del cursore e gli eventi triggersti ​​facendo clic sul cursore.

Ci sono alternative o soluzioni che sono meno dirompenti per l’UX di una pagina web che verrà utilizzata sia con i mouse sia con i dispositivi touch?

Esiste un’alternativa o una procedura consigliata per la gestione degli eventi javascript OnMouseOver sui dispositivi touch?

La risposta breve è no.

Gli eventi specifici del dispositivo non hanno una mapping 1: 1 per gli eventi da altri dispositivi. Non esiste un equivalente corretto di ‘hovering’ quando si usa Touch.

Gli eventi del mouse ( mouseover , mouseout , mouse del mouse, mouseup , mouse ecc.) Sono specifici del dispositivo di input del mouse. La tastiera ha keydown , keypress e keyup . Touch ha touchstart , touchmove , touchend e touchcancel . Webkit su iPhone / iPad / etc ha altri eventi di avvio / spostamento / fine della gestazione specifici di Apple.

Eventi generici di livello superiore come messa a fuoco , sfocatura , clic , invio , ecc. Possono essere triggersti ​​da uno di questi eventi. Ad esempio, un evento click può essere triggersto utilizzando un mouse, un touch o un evento della tastiera. ( clic , btw, è un evento con un nome inappropriato, che dovrebbe essere chiamato più correttamente azione, ma a causa della sua storia del mouse è ancora chiamato clic ).

L’approccio preferito (o “One Web”) utilizza gli eventi Mouse per cose specifiche del mouse in cui non è ansible evitarli e attenersi agli eventi generici per tutto il resto.

A seconda della build di WebKit e dei flag utilizzati per costruirlo, è ansible triggersre alcuni eventi del mouse su alcune interfacce Touch in alcuni casi particolari , ma in realtà non si desidera creare l’interfaccia utente in quanto l’unico motivo per cui esistono questi casi è consentire mobile-Webkit per ottenere la trazione sul mercato.

Gli eventi di touch sono anche incoerenti tra le piattaforms. Dai un’occhiata al lavoro di ppk per un po ‘di riferimento se stai facendo qualche mobile / touch, http://quirksmode.org/mobile/tableTouch.html

Gli eventi javascript onmouseover / onmouseout si tradurrebbero negli eventi touch touch / touchleave touch, il problema è che questi eventi stanno appena iniziando a essere implementati nei browser (fanno parte di una bozza W3C ), attualmente solo Firefox lo supporta , quindi se stai usando webkit dovrai attendere, o implementare la tua funzione onmouseover usando l’evento touchmove e osservando le coordinate e per vedere se si sovrappongono con le coordinate del tuo elemento html.

A seconda delle tue esigenze e degli utenti target, potresti essere interessato alle API JS touch disponibili (almeno) su Safari e Chrome mobili. Controlla http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html , per un’introduzione rapida (forse un po ‘datata). Non li ho usati molto estensivamente (solo per il targeting dell’iPhone, ad esempio), ma sono stato molto contento dei risultati che ho ottenuto finora.

Penso di essere riuscito a creare una buona simulazione (almeno per un gestore di eventi specifico che volevo simulare) combinando il gestore di eventi ‘touchmove’ e chiamando il metodo elementFromPoint () usando le coordinate (memorizzate nelle proprietà clientX / clientY del object) dell’object Touch rilevante nell’evento (ho usato e.touches [0]).

Per una risposta più dettagliata, vedere la mia risposta al caso d’uso specifico di questo utente (riempiendo le celle di una tabella) in base a una soluzione per il mio problema (triggerszione degli stati della casella di controllo) qui: https://stackoverflow.com/a/31711040/ 1941313 .

In alternativa, leggi la relazione completa che ho scritto sulla ricerca del design del gestore di eventi di scrittura, comprese le fonti dei miei risultati nel seguente elenco: https://gist.github.com/VehpuS/6fd5dca2ea8cd0eb0471

(Li avrei postati in stackoverflow ma il mio rappresentante è troppo basso al momento, quindi posso fornire solo due link: P)

Spero che questo ti aiuti!