risposta-alla-domanda-sullo-sviluppo-web-bd.com

Comprensione degli eventi tattili

Sto cercando di far funzionare alcune delle mie librerie con dispositivi touch, ma sto facendo fatica a capire come sono supportate e come funzionano.

Fondamentalmente, ci sono 5 eventi touch , ma sembra che ci sia consenso tra i browser mobili solo sull'evento touchstart (duh). Ho creato un violino come test case.

Ho provato questo sul mio Galaxy Note con Android 4 a bordo, ma puoi controllare il collegamento anche con un browser desktop.

L'obiettivo è cercare di capire come gestire i tocchi, i doppi tocchi e i tocchi lunghi. Nulla di bello.

Fondamentalmente, questo è ciò che accade:

Il browser stock Android non genera eventi touch. Cerca solo di emulare i clic del mouse con i tocchi, attivando mousedown, mouseup e click consecutivamente, ma i doppi tocchi ingrandiscono e rimpiccioliscono la pagina.

Chrome per Android genera l'evento touchstart quando il dito tocca lo schermo. Se viene rilasciato abbastanza presto, si attiva quindi mousedown, mouseup, touchend e infine click eventi.

In caso di tocco lungo, dopo circa mezzo secondo spara mousedown e mouseup e touchend quando si solleva il dito, con nessun evento click alla fine.

Se muovi il dito, genera un evento touchmove un paio di volte, quindi genera un evento touchcancel e non succede nulla dopo, nemmeno un touchend evento quando si solleva il dito.

A doppio tocco attiva le funzioni di ingrandimento/riduzione, ma per quanto riguarda gli eventi attiva la combinazione touchstart-touchevent due volte, senza eventi del mouse attivati.

Firefox per Android genera correttamente l'evento touchstart e, in caso di tocco breve, viene attivato mousedown, mouseup, touchend e click in seguito.

In caso di tocco lungo, genera mousedown, mouseup e infine touchend eventi. È lo stesso di Chrome per queste cose.

Ma se muovi il dito, se spara continuamente touchmove (come ci si potrebbe aspettare) ma non fa no spara touchleave evento quando il dito lascia l'elemento con il listener di eventi e non attiva l'evento touchcancel quando il dito esce dalla finestra del browser.

Per doppi tocchi, si comporta proprio come Chrome.

Opera Mobile fa la stessa cosa di Chrome e Firefox per un tocco breve, ma in caso di pressione lunga attiva alcuni tipo di funzionalità di condivisione che voglio davvero disabilitare. Se muovi il dito o fai doppio tap, si comporta proprio come Firefox.

Chrome beta fa il solito per i tocchi brevi, ma in caso di tocchi lunghi non attiva più l'evento mouseup, solo touchstart, quindi mousedown dopo mezzo secondo, quindi touchend quando il dito viene sollevato. Quando si sposta il dito, ora si comporta come Firefox e Opera Mobile.

In caso di doppi tocchi, non genera eventi di tocco quando si esegue lo zoom indietro, ma solo quando si esegue lo zoom.

Chrome beta mostra il comportamento più strano, ma non posso davvero lamentarmi perché è una beta.

La domanda è : esiste un modo semplice e per provare a rilevare tocchi brevi, lunghi e doppi nei browser più comuni dei dispositivi touch?

Peccato che non riesco a testarlo su dispositivi iOS con Safari o IE per Windows Phone 7/Phone 8/RT, ma se alcuni di voi lo sapessero, il tuo feedback sarebbe molto apprezzato.

javascriptmobiletouch
77
MaxArt

Se non lo hai già fatto, suggerirei di leggere il codice sorgente per Hammer.js

https://github.com/hammerjs/hammer.js/blob/master/hammer.js

Tra commenti e codice sono circa 1400 righe, c'è un'ottima documentazione e il codice è facile da capire.

Puoi vedere come l'autore ha scelto di risolvere molti degli eventi touch comuni:

tieni premuto, tocca, tasto doppio, trascina, trascina, trascina, trascina, trascina, trascina, trascina, dragright, scorri, scorri, scorri verso il basso, scorri, trascina, mirino, trasforma, avvia, trasforma, ruota, pizzica, pizzica, pizzica, tocca (inizia il rilevamento dei gesti) , rilascia (termina il rilevamento dei gesti)

Penso che dopo aver letto il codice sorgente avrai una comprensione molto migliore di come funzionano gli eventi tattili e come identificare quali eventi è in grado di gestire il browser.

http://eightmedia.github.io/hammer.js/

25
vrtis

C'è una risorsa davvero eccellente https://patrickhlauke.github.io/touch/tests/results/ che descrive in dettaglio l'ordine degli eventi attraverso un numero impressionante di browser. Sembra anche essere aggiornato regolarmente (a settembre 2016, è stato aggiornato l'ultima volta ad agosto 2016).

Il Gist è, essenzialmente tutto innesca mouseover e gli eventi correlati; la maggior parte attiva anche eventi touch, che di solito completi (raggiungono touchend) prima di mouseover e poi continuano a click (a meno che una modifica alla pagina il contenuto lo annulla). Queste eccezioni imbarazzanti sono fortunatamente relativamente rare (terze parti Android e playbook blackberry).

Quella risorsa collegata entra in un livello impressionante di dettagli, ecco un esempio dei primi tre di molti, molti test di sistema operativo, dispositivo e browser:

enter image description here

Per riassumere alcuni dei punti chiave:

Browser per dispositivi mobili

  • Tutti i browser elencati attivano mouseover al primo tocco. Solo alcuni browser Windows Phone lo attivano al secondo tocco.
  • Tutti attivano click. Non specifica quale annullare click se mouseover cambia pagina (credo che la maggior parte lo faccia)
  • La maggior parte dei browser attiva mouseover dopo touchstart e touchend. Ciò include iOS7.1 Safari, stock Android, Chrome, Opera e Firefox per Android e alcuni (non tutti i browser per telefoni Windows)
  • Diversi browser Windows Phone (tutti Windows 8/8.1 e una versione per 10) e diversi trigger di terze parti Android (Dolphin, Maxathon, UC) attivano mouseover aftertouchstart e touchend.
  • Solo Blackberry Playbook attiva mouseover tra touchstart e touchend
  • Solo Opera Mini e Puffin (di terze parti Android browser) mancano touchstart o touchend.

Browser desktop

  • Versioni ragionevolmente aggiornate di desktop Chrome e Opera si comportano come le loro controparti mobili, touchstart e touchend seguite da mouseover.
  • I browser Firefox e Microsoft (IE <= 11 e molte versioni di Edge) non attivano eventi touchstart e touchend.
  • Nessun dato sui Mac, ma presumibilmente nessun browser Ma supporta touchstart e touchend data la scarsità delle interfacce touchscreen del Mac.

C'è anche un'incredibile quantità di dati sui browser combinati con tecnologie assistive.

8
user568458

Ecco la mia ultima osservazione sugli eventi touch e mouse su Android 4.3

Opera, Firefox e Chrome sembra avere un comportamento standard

  1. Su Swipe (touchstart-touchmove-touchend):

    1. Nessun evento del mouse (escluso il passaggio del mouse) viene generato.
    2. Il passaggio del mouse si attiva solo se touchstart e touchend si verificano sullo stesso elemento. (TouchStart-touchmove-touchend-passaggio del mouse)
    3. Se al touchstart viene impedito il default: il comportamento di scorrimento predefinito non funziona. non si verificano cambiamenti relativi all'attivazione di eventi del mouse.

  2. Tocca (touchstart-touchend):

    1. Tutti gli eventi del mouse mouseover-mousemove-mousedown-mouseup-click sparano dopo un ritardo
    2. Se sul touchstart viene impedito il default: viene attivato solo il passaggio del mouse.

il browser predefinito Android presenta alcuni comportamenti non standard:

  1. Il passaggio del mouse si attiva prima del touchstart, il che significa che il passaggio del mouse si attiva sempre.
  2. Tutti gli eventi del mouse si attivano al tocco, anche se l'impostazione predefinita è impedita al tocco.
3
Semra

Sì, puoi avviare un timer su touchstart e terminarlo su touchend e fare le tue scelte da lì.

Inoltre puoi fare ... diciamo, scorri, il mio innesco touchmove puoi ottenere i coordonati del "dito" e vedere quanto ho viaggiato prima che touchend venga attivato.

Non so se ci sia un modo più semplice piuttosto che utilizzare una libreria di eventi touch, ma suppongo che potresti scriverne uno per semplici eventi "tap", "double tap", "swipe".

2
Alexandru Calin