jQuery onclick nie działa na telefonie komórkowym

Question

Próbuję aktywować menu z jQuery za pomocą kliknięcia (dotykowy) na telefonie komórkowym, ale nie działa w telefonie komórkowym. Kiedy robię "okno", zmieniając rozmiar, aby wypróbować mobilny wygląd, działa z kliknięciem, ale w emulatorze lub nawet próbując go z moim telefonem, to nie działa.

HTML Markup

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

CSS:

#mobileNavigation {display:none} 

kod 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> 

Wystarczy podać agenta użytkownika.

Answer 2

Pamiętam, że kiedy budowałem aplikację mobilną, elementy, które nie były linkami, nie były odbierane w przypadku kliknięcia, chyba że nadałem im właściwość CSS cursor: pointer. Być może jest to podobny problem. Spróbuj podać przycisk tej właściwości w atrybucie style.

Answer 3

Ustanowienie obsługi kliknij w oparciu o kliencie jako takie:

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

i używać go, gdy chcesz słuchać kliknij zdarzenia:

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

W ten sposób można zawsze upewnić się, że właściwe wydarzenie jest słuchane.

Answer 4

Przychodzi przez to pytanie i zrealizowane kliknięcie (i dotykowy) powinny działać.

@vulcanR, to nie działa w twoim przypadku, ponieważ masz już #mobileNavigation jako display: none; Tak więc nie ma miejsca, aby zdarzenie zostało uruchomione.

Zamiast tego, spróbuj poniższy kod i powinno pracą

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

Powodem tej pracy jest to, że opacity:0 zachowuje wysokość i szerokość elementu natomiast display:none sprawia wymiary zera, więc nie ma nieruchomości na wydarzenie. Mogłeś też użyć visibility:hidden, ale to nie nasłuchuje zdarzenia kliknięcia ani żadnych wydarzeń w ogóle.