jQuery onclick non funziona sul cellulare

Question

Sto tentando di attivare un menu con jQuery con un clic (tocco) su dispositivo mobile, ma non funziona su cellulare. Quando faccio il ridimensionamento della 'finestra' per provare l'aspetto mobile, funziona con il clic, ma in un emulatore o anche provandolo con il mio telefono, non funziona.

Tag HTML

<img src="i/mobilemenu.jpg" id="mobileMenuButton" style="position:absolute; right:0;"/> 

CSS:

#mobileNavigation {display:none} 

codice javascript:

<script type="text/javascript"> 
      $(document).ready(function(){ 
        $('#mobileMenuButton').on('click touchstart',function(){ 

          if ($('#mobileNavigation').css('display') == 'none') { 
           $('#mobileNavigation').css('display','block'); 
          } 
          else 
          { 
            $('#mobileNavigation').css('display','none'); } 
          }); 
        }); 
       </script> 

Answer 1

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#mobileMenuButton').on('mousedown touchstart',function(){ 
      var userAgent = window.navigator.userAgent; 
      if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)|| userAgent.match(/Android/i)) { 
     if ($('#mobileNavigation').css('display') == 'none') { 
      $('#mobileNavigation').css('display','block'); 
     } else { 
      $('#mobileNavigation').css('display','none'); 
     } 
     } 
     }); 
    }); 
</script> 

solo fornire l'user agent.

Answer 2

Mi ricordo che quando stavo creando un'app mobile, elementi che non erano collegamenti non venivano rilevati nell'evento click a meno che non avessi dato loro la proprietà CSS di cursor: pointer. Forse questo è un problema simile. Prova a assegnare al pulsante quella proprietà nell'attributo style.

Answer 3

Stabilire un gestore di clic in base al cliente in quanto tale:

var clickHandler = ("ontouchstart" in window ? "touchend" : "click") 

e utilizzarlo ogni volta che si desidera ascoltare cliccare eventi:

$(".selector").on(clickHandler, function() {...}) 

In questo modo si può sempre assicurarsi il corretto l'evento viene ascoltato.

Answer 4

È venuto attraverso questa domanda e realizzato il clic (e il touchstart) dovrebbe funzionare.

@vulcanR, non funziona nel tuo caso perché hai già #mobileNavigation come display: none; Quindi, non c'è spazio per l'evento da attivare.

Invece, provare il seguente codice e dovrebbe LAVO-

$(document).ready(function() { 
    $('#mobileMenuButton').on('click touchstart', function() { 
     if ($('#mobileNavigation').css('opacity') == '0') { 
      $('#mobileNavigation').css('opacity','1'); 
     } else { 
      $('#mobileNavigation').css('opacity','0'); } 
     }); 
    }); 
}); 

La ragione di questo lavoro è che opacity:0 mantiene l'altezza e la larghezza dell'elemento che display:none rende le dimensioni pari a zero, quindi non c'è tenuta per l'evento. Si potrebbe anche usare visibility:hidden, ma questo non ascolta l'evento click o nessun evento in generale.