Jquery：<a>链接点击 preventDefault() 不起作用？</a>

Question

I'm trying to prevent a link click from firing if accidentally touched while scrolling in mobile? I have never tried something like this before and am having trouble getting it to work right. I am testing this on a desktop for the time being. My buttons are structured similar to:

<a href="http://www.google.com">
    <div style="width:100%;height:80px;margin-bottom:50px;">test</div>
</a>

I am trying to use the preventDefault() function to override default click actions and check if a the page is being scrolled, or it the click was accidental before allowing it to work. The logic to check seems to work, however the links navigate on click no matter what i do. I assume this has something to do with the links behaviour being propogated to the child div, but am not sure.

Below is my script, the problem is in the last $('a').click(); function.

UPDATE:

I still need a better way to do it using just the $('a') selector if anyone knows how. Kind of a hack but, if i change the selector to $('a>div') and change the 'targetLink' to $(this).parent().attr('href') it seems to work, Is there a way to do this using $('a') only because some of my buttons have more children.

//Mobile accidental scroll click fix:---
//- prevent clicked link from executing if user scrolls after mousedown, until next mousedown.
//- prevent clicked link from executing if user is still scrolling and mouse is down(for slow scrolls)

$(document).ready(function(){
    var self = this,
        scrolling = false,
        mouseDown = false,
        scrollAfterPress = false;
        scrollDelay = 1500,
        linkConditionCheckDelay = 700;

        $(window).scroll(function() {
            self.scrolling = true;
            console.log('scrolling:' + self.scrolling);
            clearTimeout( $.data( this, "scrollCheck" ) );
            $.data( this, "scrollCheck", setTimeout(function() {
                self.scrolling = false;
                console.log('scrolling:' + self.scrolling);
            }, scrollDelay) );

        });

        $(document).mousedown(function(){
                self.scrollAfterPress = false;
                int00 = setInterval(function() { checkScrollAfterPress(); }, 100);//execute every 100ms (while mouse is down)
                self.mouseDown = true;
                console.log('mousedown:'+ self.mouseDown);
            }).mouseup(function(){
                clearInterval(int00);
                self.mouseDown = false; 
                console.log('mousedown:'+ self.mouseDown);
            });

        function checkScrollAfterPress(){
            if(self.scroll === true){
                self.scrollAfterPress = true;
            }
        }

        $('a').click(function(e){
             //prevent default click event behaviour
            var targetLink = $(this).attr('href');
            console.log('clicked on:'+targetLink);
            setTimeout(function() {
                    if(!self.scrolling && !self.mouseDown && !self.scrollAfterPress && targetLink !== undefined){
                        window.location.href = targetLink;
                    }
                }, linkConditionCheckDelay); //add small delay to prevent immeditiate responses between mouse up and start of scroll.
            e.stopPropagation();
            e.preventDefault();
        });
});

Answer 1

You can use return false or e.preventDefault

But when you click on that link why your adding window.location.href = targetLink; ?? which will redirect the user to the given location.Same as link

Try my code below i have removed it.

 $(document).ready(function(){ var self = this, scrolling = false, mouseDown = false, scrollAfterPress = false; scrollDelay = 1500, linkConditionCheckDelay = 700; $(window).scroll(function() { self.scrolling = true; console.log('scrolling:' + self.scrolling); clearTimeout( $.data( this, "scrollCheck" ) ); $.data( this, "scrollCheck", setTimeout(function() { self.scrolling = false; console.log('scrolling:' + self.scrolling); }, scrollDelay) ); }); $(document).mousedown(function(){ self.scrollAfterPress = false; int00 = setInterval(function() { checkScrollAfterPress(); }, 100);//execute every 100ms (while mouse is down) self.mouseDown = true; console.log('mousedown:'+ self.mouseDown); }).mouseup(function(){ clearInterval(int00); self.mouseDown = false; console.log('mousedown:'+ self.mouseDown); }); function checkScrollAfterPress(){ if(self.scroll === true){ self.scrollAfterPress = true; } } $('a').click(function(e){ //prevent default click event behaviour var targetLink = $(this).attr('href'); console.log('clicked on:'+targetLink); setTimeout(function() { if(!self.scrolling && !self.mouseDown && !self.scrollAfterPress && targetLink !== undefined){ //window.location.href = targetLink; } }, linkConditionCheckDelay); //add small delay to prevent immeditiate responses between mouse up and start of scroll. return false; }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="http://www.google.com"> <div style="width:100%;height:80px;margin-bottom:50px;">test</div> </a>

Answer 2

I will suggest another approach and use jQuery Mobile Events . Something like this:
^{*untested, but is the idea}

// set global var 'locked'
var locked = false;

// locked var true while scrolling
jQuery(document).on('scrollstart', function() { locked = true; });

// locked var back to false when finish
jQuery(document).on('scrollstop', function() { locked = false; });

// bind 'tap' & 'click' events to 'a' tag
jQuery(document).on('tap click', 'a', function(event) {
    // But before proceed, check locked var
    if (locked) {
        event.preventDefault;
        return false;
    } else {
        // ok, proceed with the click and further events...
    }
});

^{Docs/ref: scrollstart event scrollstop event tap event vclick event .click()}

Answer 3

Use in your $'a'.click(function(e){...} part return false; to prevent the default behavior.

In your case:

$('a').click(function(e){
        var targetLink = $(this).attr('href');
        console.log('clicked on:'+targetLink);
        setTimeout(function() {
                if(!self.scrolling && !self.mouseDown && !self.scrollAfterPress && targetLink !== undefined){
                    window.location.href = targetLink;
                }
            }, linkConditionCheckDelay); 
        return false;//Stops default behavior
    });

Answer 4

Perhaps there is something I am missing, but I do not see why your code cannot be made as simple as the following:

$(document).ready(function () {
    var is_scrolling = false;
    var timeout = null;

    $(window).scroll(function () {
        is_scrolling = true;
        if (timeout) {
            clearTimeout(timeout);   
        }
        timeout = setTimeout(function () {
            is_scrolling = false;
        }, 1500);
    });

    $('a').click(function (e){
        if (is_scrolling) {
            e.preventDefault();
        }
    });
});