utilizzando touchstart fa sì che lo schermo diventi sfocato su touchstart

Question

Attualmente sto testando la funzionalità touchstart sul mio dispositivo (Samsung Galaxy S2) per il mio gioco. Sto programmando utilizzando JavaScript e jQuery avvolti sotto PhoneGap in Android e attualmente avendo problemi come segue:

• mio tocco inizio dell'evento (ad esempio, l'attivazione di un pulsante di attacco "TouchStart" evento per eseguire alcuni javascript per eseguire l'azione di attacco) cause il mio schermo diventa temporaneamente sfocato, quindi torna alla normalità in meno di un secondo, quindi più simile a uno sfarfallio dello schermo in cui le immagini diventano nervose). Non sto usando le trasformazioni o le transizioni css semplicemente css e immagini.

Qualcuno può, per favore, farmi sapere se hanno riscontrato problemi simili inestranei ai miei. Un po 'incerto se si tratta di un problema hardware o touchstart in cui posso risolvere il problema.

JavaScript di esempio di seguito per i miei comandi di navigazione (sinistra, su, giù, toccare TouchStart a destra):

if ('ontouchstart' in document.documentElement) { 
     var left = document.getElementById('left'); 
     left.addEventListener("touchstart", function(e){ 
      if(controlsPlayerChar == '') 
      { 
       return false; 
      } 

      var l_oldCell = $('#' + controlsPlayerChar).parent().attr('id'); 
      var l_xy = l_oldCell.split('_'); 
      var l_x = l_xy[0]; 
      var l_y = l_xy[1]; 

      if(l_y == 1) 
      { 
       direction = "left"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      var l_newCell = l_x + '_' + (parseInt(l_y) - 1); 

      // validate if next cell is empty 
      if($('#' + l_newCell + ':has(".shadow")').val() != undefined 
      || $('#' + l_newCell + ':has(".ally")').val() != undefined 
      || $('#' + l_newCell + ':has(".obstacle")').val() != undefined) 
      { 
       direction = "left"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      $('#' + l_newCell).append($('#' + controlsPlayerChar)); 
      $('#' + l_oldCell + ' ' + '#' + controlsPlayerChar).remove(); 

      // set char direction to 'left' and set next footstep 
      setDirection('left'); 
      setFootstep(footstep); 
      setCharDynamics(controlsPlayerChar); 
     }); 

     var up = document.getElementById('up'); 
     up.addEventListener("touchstart", function(e){ 
      if(controlsPlayerChar == '') 
      { 
       return false; 
      } 

      var u_oldCell = $('#' + controlsPlayerChar).parent().attr('id'); 
      var u_xy = u_oldCell.split('_'); 
      var u_x = u_xy[0]; 
      var u_y = u_xy[1]; 

      if(u_x == 1) 
      { 
       direction = "up"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      var u_newCell = (parseInt(u_x) - 1) + '_' + u_y; 

      // validate if next cell is empty 
      if($('#' + u_newCell + ':has(".shadow")').val() != undefined 
      || $('#' + u_newCell + ':has(".ally")').val() != undefined 
      || $('#' + u_newCell + ':has(".obstacle")').val() != undefined) 
      { 
       direction = "up"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      $('#' + u_newCell).append($('#' + controlsPlayerChar)); 
      $('#' + u_oldCell + ' ' + '#' + controlsPlayerChar).remove(); 

      // set char direction to 'up' and set next footstep 
      setDirection('up'); 
      setFootstep(footstep); 
      setCharDynamics(controlsPlayerChar); 
     }); 

     var down = document.getElementById('down'); 
     down.addEventListener("touchstart", function(e){ 
      if(controlsPlayerChar == '') 
      { 
       return false; 
      } 

      var d_oldCell = $('#' + controlsPlayerChar).parent().attr('id'); 
      var d_xy = d_oldCell.split('_'); 
      var d_x = d_xy[0]; 
      var d_y = d_xy[1]; 

      if(d_x == rows) 
      { 
       direction = "down"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      var d_newCell = (parseInt(d_x) + 1) + '_' + d_y; 
      // validate if next cell is empty 
      if($('#' + d_newCell + ':has(".shadow")').val() != undefined 
      || $('#' + d_newCell + ':has(".ally")').val() != undefined 
      || $('#' + d_newCell + ':has(".obstacle")').val() != undefined) 
      { 
       direction = "down"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      $('#' + d_newCell).append($('#' + controlsPlayerChar)); 
      $('#' + d_oldCell + ' ' + '#' + controlsPlayerChar).remove(); 

      // set char direction to 'down' and set next footstep 
      setDirection('down'); 
      setFootstep(footstep); 
      setCharDynamics(controlsPlayerChar); 
     }); 

     var right = document.getElementById('right'); 
     right.addEventListener("touchstart", function(e){ 
      if(controlsPlayerChar == '') 
      { 
       return false; 
      } 

      var r_oldCell = $('#' + controlsPlayerChar).parent().attr('id'); 
      var r_xy = r_oldCell.split('_'); 
      var r_x = r_xy[0]; 
      var r_y = r_xy[1]; 
      if(r_y == cols) 
      { 
       direction = "right"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      var r_newCell = r_x + '_' + (parseInt(r_y) + 1); 

      // validate if next cell is empty 
      if($('#' + r_newCell + ':has(".shadow")').val() != undefined 
      || $('#' + r_newCell + ':has(".ally")').val() != undefined 
      || $('#' + r_newCell + ':has(".obstacle")').val() != undefined) 
      { 
       direction = "right"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      $('#' + r_newCell).append($('#' + controlsPlayerChar)); 
      $('#' + r_oldCell + ' ' + '#' + controlsPlayerChar).remove(); 

      // set char direction to 'right' and set next footstep 
      setDirection('right'); 
      setFootstep(footstep); 
      setCharDynamics(controlsPlayerChar); 
     }); 
} 

Si prega di farmi sapere se si pensa qualcosa non va per quanto riguarda script precedente. Il modo in cui aggiungo l'evento touchstart è lo stesso in altre aree del mio script quando, per esempio, per lanciare un attacco o lanciare un menu di opzioni.

Answer 1

Sembra che questo sia toccare l'evidenziazione.

Si può provare a disabilitare questo effetto applicando la proprietà CSS -webkit-tap-highlight-color sui controlli o disabilitare questo in tutti gli elementi usando il selettore *.

Ad esempio:

.someelement { 
    -webkit-tap-highlight-color: transparent; 
} 

Answer 2

Abbiamo incontrato questo problema quando si utilizza le trasformazioni translate3d.

Abbiamo fissato impostando

* { -webkit-transform: translate3d(0,0,0,); } 

in modo che ogni elemento viene inizializzato per lo spazio 3D

Answer 3

Prima di tutto, assicurarsi che si sta chiamando preventDefault() sull'evento. Ho notato che se stai prendendo di mira anche gli eventi del mouse, possono attivarsi al tocco. Altrimenti, utilizzo un metodo leggermente diverso per disabilitare l'evidenziazione del tocco. Prova:

-webkit-tap-highlight-color: rgba(0,0,0,0); 

Nel css per il pulsante.