Question

我试图通过移动设备上的点击（触摸）来激活带有jQuery的菜单，但它无法在移动设备上运行。当我进入“窗口”时调整大小以尝试移动外观，它适用于点击，但在模拟器中甚至尝试使用我的手机，它不起作用。

HTML标记

<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

根据客户端建立点击处理程序：

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

并在您想要收听点击事件时使用它：

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

通过这种方式，您可以始终确保正在收听正确的事件。

Answer 2

我记得当我构建一个移动应用程序时，除非我给了cursor: pointer的CSS属性，否则不是链接的元素就不会在click事件中找到。也许这是一个类似的问题。尝试在style属性中提供属性按钮。

Answer 3

<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 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，但这并不会听取点击事件或任何一般事件。

jQuery onclick无法在移动设备上运行

4 个答案: