jQuery onclick 在移动设备上不起作用答案

【问题标题】：jQuery onclick not working on mobilejQuery onclick 在移动设备上不起作用
【发布时间】：2017-11-01 19:22:45
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

尝试移除 click 并只保留 touchstart，看看是否有影响，而不是您的解决方案。
它可以从我的 Android 访问：jsfiddle.net/drn595w3/show
提示：您可以将所有显示/隐藏过程和条件替换为：$('#mobileNavigation').toggle() - 请参阅：jsfiddle.net/drn595w3/1
尝试了切换，仍然没有，在 jsfiddle 上尝试过，它可以工作，谢谢，但我不知道为什么在页面上它不起作用

标签： javascript jquery html css

【解决方案1】：

建立一个基于客户端的点击处理程序：

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

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

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

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

【讨论】：

试过但不起作用...我知道这很奇怪，我寻求帮助的所有其他开发人员也对它不起作用感到惊讶

【解决方案2】：

我记得当我构建一个移动应用程序时，不是链接的元素不会在点击事件中被选中，除非我为它们提供cursor: pointer 的 CSS 属性。也许这是一个类似的问题。尝试在style 属性中为按钮提供该属性。

【讨论】：

【解决方案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>

只需提供用户代理。

【讨论】：

为什么 OP 应该这样做？请解释一下。
鼠标在移动设备上？

【解决方案4】：

遇到这个问题并意识到点击（和触摸启动）应该可以工作。

@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，但它通常不会监听点击事件或任何事件。

【讨论】：