The Mo The Mo - 8 months ago 65
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?


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.