The Mo The Mo - 1 year ago 116
Javascript Question

Prevent clicking a link if scroll on mobile

I have long vertical list of links that user can scroll through, and I need to prevent triggering a

event (touch) on this links if user scrolls.

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

Answer Source

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 ){

Hope this helps.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download