使用 JQuery 在移动设备上触发点击事件答案

【问题标题】：Trigger a click event on mobile devices using JQuery使用 JQuery 在移动设备上触发点击事件
【发布时间】：2015-02-12 17:40:51
【问题描述】：

当在移动设备上查看时，我正在使用 Sidr 插件向我的网站添加一个侧边菜单。当用户单击其中一个侧面菜单项时，我希望菜单关闭，然后向下动画到他们选择的项目。本质上，它是一个美化的内部链接菜单，其中包含大量带有 ID 的内容的哈希链接。

以下是我目前为此目的的代码：

    $(".mobile-nav button").sidr({source: ".sidr" });
    $('.sidr nav ul').on('click', 'li a[href^="#"]', function(){
        $(".mobile-nav button").click();
        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });

        return false;
    });

在桌面浏览器上以 400px 宽查看时效果很好。但是在实际的手机上查看时，有效关闭 Sidr 菜单的 .click() 不起作用。

我相信这是因为您无法在手机上“点击”，但谁能想到我该如何解决这个问题？任何帮助都会很棒。

谢谢

【问题讨论】：

尝试tap 事件而不是click..

标签： javascript jquery jquery-mobile sidr

【解决方案1】：

使用click touchstart:

$('.sidr nav ul').on('click touchstart', 'li a[href^="#"]', function(){
//rest of your code
}

【讨论】：

【解决方案2】：

我在移动设备上遇到了与 sidr 类似的问题。最后，我用过

$.sidr("toggle","sidr-0");

而不是

$( "#sidr-0" ).trigger( "click" );

它奏效了。这显然与移动设备上准备好的文档和移动浏览器使用 ajax 页面加载导致 click() 被提前触发有关。我希望这会有所帮助。

【讨论】：