jQuery单击事件未在移动点击时触发答案

【问题标题】：jQuery click event not firing on mobile tapjQuery单击事件未在移动点击时触发
【发布时间】：2017-09-24 19:38:08
【问题描述】：

我有一个用于打开/关闭移动菜单的伪按钮：

<div id="top-nav-mobile-toggle">
<i class="fa fa-bars"></i>
</div>

要打开和关闭菜单，我有：

$('#top-nav-mobile-toggle').click(function() {
  $('.top-nav-menu').slideToggle();
});

它在桌面上运行良好（使用鼠标），但是当我点击触摸屏设备时，它就不起作用了。

有什么方法可以在不使用大型 jQuery 插件的情况下使其在触摸屏设备上可靠地工作？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您应该使用.on("click touchstart") 而不是.click。这对我有用。

$('#top-nav-mobile-toggle').on("click touchstart", function() {
  $('.top-nav-menu').slideToggle();
});

【讨论】：

我在 Safari 上测试过。

【解决方案2】：

你可以试试：

更改您的 html 代码以包含标签：

<div>
    <i class="fa fa-bars">
        <a href="#" id="top-nav-mobile-toggle"></a>
    </i>
</div>

在 javascript/jQuery 代码中使用 return false 来停止冒泡：

$(document).ready(function(){
    $('#top-nav-mobile-toggle').click(function() {
        $('.top-nav-menu').slideToggle();
        return false;
    });
});

【讨论】：