Gli eventi tattili del browser Android interrompono la visualizzazione in corso di aggiornamento. canvas/elements - Come lavorare?

Il del il browser nativo di Android che tocca la pagina sembra interrompere l'aggiornamento del display fino al rilascio del dito. Ciò si verifica sia per l'animazione basata su elementi HTML (commutazione di classi) che per l'animazione basata sul canvas. Tuttavia, non interrompe la normale esecuzione di js e altri eventi vengono attivati normalmente. Sui dispositivi con questo problema sembra anche essere stato eseguito il browser dei delfini (non il firefox).Gli eventi tattili del browser Android interrompono la visualizzazione in corso di aggiornamento. canvas/elements - Come lavorare?

Touchstart/move hanno entrambi preventDefault() attivato come stopPropergation(), cancelBubble = true; e e.returnValue = false ;. Anche la selezione del webkit CSS è stata disabilitata. La pagina non scorrerà.

Una domanda simile è stata posta qui: Does Android browser lock DOM on touchStart?

ma mi piacerebbe sapere se questo comportamento può essere superato, o almeno per scoprire quali dispositivi sarà effettuato dal problema, si tratta di una problema di dispositivo o versione Android? Se non riesci a rispondere alla domanda eseguendo la demo e riportando la tua esperienza insieme al tuo modello di dispositivo e useragent (visualizzato nella parte inferiore della pagina demo) come commento potresti aiutare gli altri o me stesso a rispondere alla domanda.

Ecco una demo e passaggi per riprodurre il comportamento. Un codice QR per il collegamento può essere trovato qui https://s3-eu-west-1.amazonaws.com/canvas-test-pd/tmp.png.

https://s3-eu-west-1.amazonaws.com/canvas-test-pd/index.html

La pagina web ha una tela nella parte superiore e un div un'immagine di sfondo in basso con. Ogni secondo la tela viene cancellata e viene visualizzata un'immagine diversa e il div ha la sua classe commutata (entrambi alternano tra 0 e 1 png). Una volta che questo si è spostato un paio di volte posizionare il dito sulla tela (la casella grigia in alto) e tenerlo lì. Aspetta di vedere se l'animazione continua (a volte si fermerà una o due volte) e se ci sono distorsioni visive.

Aggiornamento sembra che il Galaxy Tab 3.2 in esecuzione richiede gestori per TouchStart/fine del documento, non solo div necessarie per lo schermo per continuare l'aggiornamento del display. Grazie jimpic.

Sto iniziando a credere che sia un problema causato dalle skin dei produttori, anche se questo è difficile da dimostrare.

fonte

2012-04-20 Ed Kirk

inizierò: visualizzazione non aggiorna fino dito alzato . Dispositivo Huawei Ascert G300: mozilla/5.0 (linux; u; android 2.3.6; it-gb; u8815 build/huaweiu8815c02b882) applewebkit/533.1 (khtml, come gecko) versione/4.0 mobile safari/533.1 –

Non riesco davvero a dirti perché questo sta accadendo, ma mi sono imbattuto in un problema simile, durante la registrazione per i documenti toccano gli eventi. Quando mi sono registrato solo per gli eventi di spostamento tattile, ho avuto esattamente lo stesso problema riscontrato, tuttavia, quando mi sono registrato anche per Touchstart, ha funzionato all'improvviso. Nel tuo caso, aggiungi le seguenti righe al tuo main.js

function touchHandlerDummy(e) 
{ 
    e.preventDefault(); 
    return false; 
} 
document.addEventListener("touchstart", touchHandlerDummy, false); 
document.addEventListener("touchmove", touchHandlerDummy, false); 
document.addEventListener("touchend", touchHandlerDummy, false);

Funziona sul mio Galaxy Tab. Spero che questo sia quello che stavi cercando di fare.

fonte

2012-05-08 09:11:07 jimpic

Grazie per la risposta, ma il il codice demo già utilizza preventDefault e restituisce false su touchstart e touchmove. La pagina demo funziona sulla tua scheda? E quale versione di Android stai usando (sovversione pure per favore, cioè x.y.z)? Grazie ancora –

So che già utilizza preventDefault, ma solo per gli elementi selezionati, non per il documento completo, forse questo è il problema. Basta aggiungere le righe sopra al tuo main.js nella tua funzione jQuery ready() e funzionerà. Non ha funzionato sul mio Galaxy Tab prima, ma dopo - quindi provalo :) (versione 3.2 di Android) Ho fatto una copia del tuo progetto completo e aggiunto le linee di cui sopra. Ora funziona. – jimpic

Originariamente in questa demo avevo gestori per gli eventi touch del documento, ma li ho rimossi per consentire il copia e incolla del programma utente. Non risolve il problema sul mio dispositivo (Huawei g300), ma è interessante che tu sia testimone di quel comportamento sulla tua scheda 3.2. Senza gestori per il documento touchstart/end funziona su Galaxy Ace 2.3.3 e sul simulatore Android 2.3.3. Non ho provato 3.2 sulla sim - lo farò più tardi e confronterò. Sto iniziando a pensare che questo potrebbe essere un problema con i diversi produttori di skin applicabili. Aggiornerò la domanda con le tue informazioni, grazie. –

questo farà il trucco :)

funzione touchHandlerDummy (e) { e.preventDefault(); return false; } document.addEventListener ("touchmove", touchHandlerDummy, false);

fonte

2012-11-25 11:00:53 k0sh

Questo è già stato suggerito e discusso nella risposta di Jimpic. Inoltre, devi sempre gestire anche il touchstart quando si esegue il normale comportamento. –

Ho avuto lo stesso problema.abbastanza Magicamente, il problema è scomparso completamente quando ho aggiunto la seguente riga alla sezione <header>:

<meta name="viewport" content="width=device-width">

fonte

2013-12-21 18:19:41

Questa soluzione ha funzionato per me. Ma ora l'utente può ingrandire la pagina, che non voglio. Il mio meta tag originale assomigliava a questo: ''. Giocando con esso, ho scoperto che posso impostare la scala massima a 1.1. Ora il touchstart funziona e l'utente può ingrandire la pagina, ma solo un pochino. La mia metamorfosi ora si presenta così: '' –

Wow, era così! Parla di un problema oscuro! @BrianEphraim Se non hai bisogno di scorrere la pagina, puoi anche impostare un listener di eventi 'touchmove' su' document.body' e chiamare 'preventDefault' sull'evento. Ciò impedirà lo zoom. –

risposte qui mi ha aiutato molto.

La mia soluzione è semplice combinazione di ciò che è già stato detto, quindi se si vuole: Scalata
1. "drag and drop" sul Samsung Galaxy S2 browser nativo (Android 4.1.2)
2. Disabilitare l'utente pagina (viewport impostato alcun ridimensionamento)

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.01"> 
    <script> 
     window.addEventListener("load", function() { 
      function onTouchPreventDefault(event) { event.preventDefault(); }; 
      document.addEventListener("touchmove", onTouchPreventDefault, false); 
      document.addEventListener("touchstart", onTouchPreventDefault, false); 
     }, false); 
    </script> 
</head>

viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.01">
- purtroppo utente può comunque ingrandire la pagina in un po ', 1,01 è il valore più piccolo che fa il lavoro
Disabilita pinch to zoom
document.addEventListener("touchmove", function (event) { event.preventDefault(); }, false);
- questo disabilita pizzicare per ingrandire
Disabilita doppio tap per ingrandire
document.addEventListener("touchstart", function (event) { event.preventDefault(); }, false); //OR document.addEventListener("touchend", function (event) { event.preventDefault(); }, false);
- questo disabilita doppio tap per ingrandire, è possibile scegliere se si desidera utilizzare o TouchStart touchend (o entrambi) per questo purpouse

fonte

2014-05-20 13:20:17

Gli eventi tattili del browser Android interrompono la visualizzazione in corso di aggiornamento. canvas/elements - Come lavorare?

risposta

Problemi correlati