Disabilitare l'attivazione di touchcancel nel browser Android

Question

Sto creando un sito Web mobile che utilizza eventi di tocco JavaScript. Le cose funzionano bene in iOS Safari e Chrome per Android, ma il browser Android di serie (versione 4.1.2) mi dà problemi.

Durante un processo di tocco, gli eventi touchstart10 e touchmove vengono chiamati come previsto. Tuttavia, una delle azioni eseguite dal gestore touchmove sembra attivare un evento touchcancel prematuro. (Non sono sicuro che ciò sia significativo, ma l'azione che attiva lo touchcancel è la modifica dell'attributo viewBox di un oggetto SVG). Se commento questa azione, il processo di tocco procede normalmente (ovvero, il completamento di touchmove fino a touchend).

Tutti i miei gestori di tocco chiamano la funzione preventDefault(), quindi il problema non è quello descritto in questo errore: https://code.google.com/p/android/issues/detail?id=19827.

Ho letto che c'è un gran numero di inconsistency among browsers per quando viene chiamato touchcancel. Il browser Android di serie è l'unico che è problematico per me.

Esiste una soluzione? Ad esempio, è qui posso disabilitare completamente l'evento touchcancel? Un'altra idea che ho avuto è stata quella di avere il gestore touchcancel in modo programmatico per attivare un altro evento touchstart/touchmove, ma con questo non sono arrivato molto lontano. Qualsiasi idea sarebbe apprezzata.

Answer 1

Penso che touchcansel sia un evento speciale che si attiva quando l'utente ha toccato il pulsante in un comportamento specifico.

Es. Pulsante touch dell'utente, ma non ha rimosso il suo dito dal display esattamente su quel pulsante, invece di questo potrebbe spostarlo un po 'a sinistra e terminare la sua azione lì. In tal caso apparirà il touchcancel.

Quindi, se non vuoi che quell'azione esploda, penso che devi rimuovere tutti i gestori che si sono connessi con quell'azione nel browser Android.

$ ('selettori'). Off ('touchcancel'), di se è $ delefated ('genitore'). Undelegate ('touchcancel', 'selector')

Non credo che ci è un problema con e.preventDefault(). Solo se fai clic su un link e la pagina inizia a ricaricare. La pagina può essere ricaricata quando si fa clic sul pulsante? e aspetti alcune azioni dopo che la pagina è stata ricaricata, in realtà potresti non capire che è successo.

Answer 2

So che è un po 'tardi ma se qualcun altro si trova ad affrontare questo problema, here's a small jQuery extension che spiega come gestire gli eventi pointercancel e touchcancel.

In sostanza, se si passa a eventi del puntatore si sarà in grado di prevenire pointercancel semplicemente utilizzando la proprietà touch-action CSS con un valore di none, fino a quando il browser ha entrambe le caratteristiche corretta applicazione. (Android 5+, Chrome 55+, IE11, Riva, ecc)

Se davvero si deve utilizzare l'eredità eventi touch invece, si dovrà implementare event.preventDefault() nei vostri eventi TouchMove e questo impedirà touchcancel da sparo , ma disabilita anche completamente la gestione del browser di qualsiasi azione predefinita come una panoramica o un clic.

Come nota finale, non vorrei usare tocco eventi + regole CSS touch-action perché touch-action è stato solo di recente aggiunti, allo stesso che quel puntatore Eventi. Quindi, mentre quella combinazione potrebbe funzionare nei nuovi browser, sarà sicuramente non riuscita negli anni precedenti (attivando in modo imprevisto l'evento touchcancel).

Controllare il README dall'estensione jQuery che ho postato perché spiega le implicazioni dell'utilizzo delle interfacce TouchEvent e PointerEvent.

Answer 3

Se si useing hammer.js, è possibile disattivare il puntatore-eventi (che causano problemi di questo tipo), con l'aggiunta di: delete window.PointerEvent; nel vostro index.html PRIMA hammer.js di carico, e ignorerà gli eventi .
È anche possibile impostare SUPPORT_POINTER_EVENTS = false; (riga 384 di v2.0.8) per fare la stessa cosa. Idealmente gli sviluppatori aggiungerebbero la possibilità di disattivarlo, ma lo stesso vale per il dilemma open source ...