jQuery onclick не работает на мобильном телефоне

Question

Я пытаюсь активировать меню с помощью jQuery одним кликом (касанием) на мобильном устройстве, но он не работает на мобильных устройствах. Когда я изменяю размер окна, чтобы попробовать мобильный вид, он работает с кликом, но в эмуляторе или даже пытается его с помощью моего телефона, он не работает.

HTML Markup

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

CSS:

#mobileNavigation {display:none} 

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> 

Просто предоставить агенту пользователя.

Answer 2

Я помню, когда я создавал мобильное приложение, элементы, которые не были ссылками, не могли набрать событие щелчка, если я не дал им свойство CSS cursor: pointer. Возможно, это аналогичная проблема. Попробуйте указать эту функцию в атрибуте style.

Answer 3

Создать обработчик щелчка на основе клиента, например:

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

и использовать его всякий раз, когда вы хотите слушать нажмите события:

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

Таким образом, вы всегда можете убедиться, что надлежащее событие прослушивается.

Answer 4

Пошел через этот вопрос и понял, что щелчок (и touchstart) должен работать.

@vulcanR, он не работает в вашем случае, потому что у вас уже есть #mobileNavigation как display: none; Таким образом, нет места для запуска события.

Вместо этого попробуйте следующий код и он должен работы-

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

Причина этой работы является то, что opacity:0 сохраняет высоту и ширину элемента, тогда как display:none делает размеры ноль, так что нет недвижимости для мероприятия. Возможно, вы также использовали visibility:hidden, но не прослушивали событие клика или какие-либо события в целом.