如果在移动设备上滚动，请阻止点击链接 [英] Prevent clicking a link if scroll on mobile

问题描述

我有很长的用户可以滚动的垂直链接列表，如果用户滚动，我需要防止在此链接上触发点击事件（触摸）。

在当前情况下，当用户通过点击链接开始滚动时，它还会在链接上触发点击。这显然是不好的。那么，有什么办法可以防止这种行为吗？

.net / z_acharki / jnwrc5ay / 132 /rel =nofollow>工作小提琴

我们可以在这种情况下使用一个标记防止在滚动过程中点击事件并在滚动停止后启用它。

要听滚动停止，您可以使用jQuery的数据方法，它使我们能够将任意数据与DOM节点相关联，并使用 setTimeout（）函数检查每个 250ms 如果用户仍然触发滚动，如果没有，它会改变标志：

  var disable_click_flag = false; 
 $ b $（window）.scroll（function（）{
 disable_click_flag = true; 
 
 clearTimeout（$。data（this，'scrollTimer'））; 
 
。.data（this，'scrollTimer'，setTimeout（function（）{
 disable_click_flag = false; 
}，250））; 
}）; （click，a，function（e）{
 if（disable_click_flag）{
 e.preventDefault（）; 
 $（body）。 b $ b} 
}）; 
  

希望这有助于您。

I have long vertical list of links that user can scroll through, and I need to prevent triggering a click event (touch) on this links if user scrolls.

In current scenario, when user start scrolling by tapping over the link, it also triggers a click on link. Which is obviously bad. So, is there any way to prevent such a behavior?

解决方案

Working fiddle

We could use a flag in this case to prevent click event just during the scroll and enable it after the scroll stop.

To listen on scroll stop you could use jQuery’s data method that gives us the ability to associate arbitrary data with DOM nodes and using setTimeout() function that will check every 250ms if the user still trigger the scroll, and if not it will change the flag :

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();
    }
});

Hope this helps.

这篇关于如果在移动设备上滚动，请阻止点击链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！