热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如果在移动设备上滚动,请阻止点击链接-Preventclickingalinkifscrollonmobile

Ihavelongverticallistoflinksthatusercanscrollthrough,andIneedtopreventtriggeringa

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?

在当前场景中,当用户通过点击链接开始滚动时,它也会触发链接上的点击。这显然很糟糕。那么,有什么办法可以阻止这种行为吗?

1 个解决方案

#1


4  

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 :

要听滚动停止,你可以使用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();
    }
});

Hope this helps.

希望这可以帮助。


推荐阅读
author-avatar
有心人php
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有