2012-03-11 11 views
10

I browser mobili simulano gli eventi del mouse per supportare i siti Web che collegano solo gestori ad eventi del mouse. Tuttavia, se si desidera implementare due modelli di interazione, uno per gli eventi del mouse e uno per gli eventi tattili, è utile impedire al browser di simulare gli eventi del mouse.Come evitare eventi simulati del mouse nei browser mobili?

Su iOS Safari questo è abbastanza semplice - basta eseguire preventDefault su touchend:

jQuery(document).on('touchend', function(e) { 
    // Do some logic  
    e.preventDefault(); 
}); 

che è abbastanza sano di mente. Sfortunatamente, né il browser predefinito di Android né Dolfin annullano la simulazione del mouse utilizzando questa tecnica. (Dolfin cancellerà il mouse quando preventDefault viene eseguito su touchstart - ma non è molto utile, perché non sai quale azione il dito avrà sul touchstart.)

C'è qualche altro modo di condizionale, o anche non condizionato , impedendo agli eventi simulati del mouse di sparare?

[EDIT]

Per cominciare a capire il problema (s) meglio, ho iniziato una tabella di compatibilità eventi touch a: http://labs.cruncher.ch/touch-events-compatibility-table/

+0

Inoltre, i commenti dell'esperienza con Chrome o FF per dispositivi mobili sono stati molto apprezzati. – stephband

+2

È possibile rilevare se si tratta di un browser mobile o meno prima di collegare gli eventi del mouse? –

+0

@JaredFarrish I metodi per il rilevamento del browser mobile non sono mai accurati al 100%. –

risposta

3

Mentre ci sono alcuni modi furbi per raggiungere questo obiettivo, ci sono due pratiche comuni che uso per andare in giro questa discrepanza:

1) Utilizzare bandiere

Impostazione bandiere booleani nei vostri gestori di eventi, come ad esempio 012.o mouseIsMoving, può essere impostato e controllato per eventi mouse e touch. Se un utente fa clic su un mouse, accettalo come evento del mouse. Quindi, se si verifica un evento di tocco insieme a esso, ignorarlo.

2) implementare solo quello che è necessario

Bene, questa è una buona pratica in ogni caso. Non preoccupatevi di aggiungere eventi touchmove e mousemove se non è necessario. Renderà semplicemente più difficile mantenere il codice. Modifica: Probabilmente avrebbe dovuto essere più specifico: considera di ripensare la tua interfaccia utente se hai bisogno di un monitoraggio avanzato degli eventi.

Infine, non si basano su elenchi di configurazione hardware esterno, in quanto questi sono raramente 'completamente' accurata.

+0

Il tuo primo suggerimento è di dire '$ (document.body).mousemove() ', che imposterà un flag globale, quindi verrà rimosso e che verrebbe utilizzato in ogni evento' mouse-'per rilevare la presenza di un mouse? –

+0

1) Il problema con gli eventi simulati è l'attivazione degli eventi di tocco, quindi gli eventi del mouse, quindi quando arriva l'evento del mouse, l'evento di tocco è già terminato. In secondo luogo, lo stato di memorizzazione come questo può diventare piuttosto peloso (a seconda di ciò che si sta facendo) quando si ha a che fare con più tocchi. Cerco di non memorizzare lo stato quando possibile. In terzo luogo, voglio occuparmi del codice che è già stato scritto per utilizzare gli eventi del mouse: non voglio entrare in tutti quei gestori e inserire il codice che chiede in modo condizionale se ci troviamo in un'interfaccia touch. Apprezzo la tua risposta, però! – stephband

+0

Inoltre, penso che il tuo secondo non sia davvero un altro approccio, è solo una buona pratica. La tua vera risposta è la prima, il secondo è un promemoria per riflettere attentamente su ciò di cui hai veramente bisogno (sempre un buon consiglio). –

Problemi correlati