点击事件在移动设备中不起作用

Question

我有一个员工档案列表，它使用 jquery 根据索引中选择的链接对其进行过滤。

HTML：

<ul id="staff-filtering-system">
    <li><a href="#" data-htb_role-filter="headmaster">Headmaster</a></li>
    <li><a href="#" data-htb_role-filter="assistant-headmaster">Assistant Headmaster</a></li>
    <li><a href="#" data-htb_role-filter="deputy-heads">Deputy Heads</a></li>
    ...
</ul>
<div class="staff_member" data-htb_role="headmaster" style="display: none;">...</div>

并使用这个函数来过滤使用这个

JS：

$("#staff-filtering-system li a").click(function(e){
    e.preventDefault();
    var q = $(this).attr("data-htb_role-filter");
    //console.log(q);
    $("div.staff_member").each(function(){
        var that = $(this)
        if(that.attr("data-htb_role") == q){
            //console.log(that);
            that.show();
        }else{
            that.hide();
        }
    });
});

这适用于桌面浏览器，但不适用于 tt 主要跳转到页面顶部或不执行任何操作的移动设备。

在谷歌快速搜索后，我尝试了以下方法：

1. 从每个索引链接中删除 href="#"
2. 在e.preventDefault();之后添加e.stopPropagation();
3. 将click()方法重写为on("touchstart click")
4. 在$("div.staff_member")... 的右括号前添加return false

似乎没有任何效果

如果我在开头包含alert(e.type)。我有时会触发一个 touchstart 事件。

欢迎任何关于我下一步应该尝试什么的建议。

我正在我的手机（Moto G5、Android 7、Chrome）和 BrowserStack（三星 Galaxy S9/Android 8 上的 Chrome 和 Google Pixel 2/Android 8 上的 Chrome）上进行测试

Answer 1

还有另一个函数在操作链接，我只是在之后重新应用了 click 方法。