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大多跳到页面顶部或不执行任何操作的移动设备上不起作用。

在Google快速搜索后，我尝试了以下操作：

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

似乎没有任何作用

如果我在开头加入alert(e.type)。我有时会触发touchstart事件。

欢迎提出任何有关我接下来应该尝试的建议。

我正在移动设备（Moto G5，Android 7，Chrome）和BrowserStack（Samsung Galaxy S9 / Android 8上的Chrome和Google Pixel 2 / Android 8上的Chrome）上进行测试

Answer 1

还有另一个用于操纵链接的功能，此后我只是重新应用了click方法。

点击事件不适用于移动设备

1 个答案: