防止移动设备滚动时误触链接

Question

我有一个长垂直链接列表，用户可以滚动浏览，如果用户滚动，我需要防止在这些链接上触发click事件（触摸）。

在当前情况下，当用户通过点击链接开始滚动时，它也会触发链接的click。这显然是不好的。那么，有没有办法阻止这种行为呢？

- momciloo

---

你改变了触摸行为吗？在我的手机上，如果我开始在链接上滚动，那么链接就不会被触发... - Simon Hänisch

根据我在移动浏览中的经验，我以前遇到过这个问题 - Upvote。我没有花费任何努力来试图抑制这种行为，但是从我的第一印象来看。您可能可以创建一个更大的元素来分离实际链接和其余的_item_。将仔细查看此帖子... - Terrance00

Answer 1

工作的代码

在这种情况下，我们可以使用一个标志来防止 click 事件在滚动期间触发，并在滚动停止后启用它。

要监听滚动停止，可以使用jQuery的数据方法，该方法使我们能够将任意数据与DOM节点关联，并使用 setTimeout() 函数，每隔 250ms 检查一次用户是否仍然触发滚动，如果未触发，则更改标志：

var disable_click_flag = false;

$(window).scroll(function() {
    disable_click_flag = true;

    clearTimeout($.data(this, 'scrollTimer'));

    $.data(this, 'scrollTimer', setTimeout(function() {
        disable_click_flag = false;
    }, 250));
});

$("body").on("click", "a", function(e) {
    if( disable_click_flag ){
        e.preventDefault();
    }
});

希望这能帮到你。

- Zakaria Acharki