WebMasterCampus
WEB DEVELOPER Resources

jQuery Event preventDefault vs Return False

jQuery Event preventDefault vs Return False


jQuery Event preventDefault vs Return False

return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event object

e.preventDefault() will prevent the default event from occuring, e.stopPropagation() will prevent the event from bubbling up and return false will do both. Note that this behaviour differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up.

preventDefault vs Return False Example

<div id="result">
        <a href="https://www.yahoo.com">www.Yahoo.com</a>
        <a href="www.bing.com">www.bing.com</a>
        <a href="www.google.com">www.google.com</a>
    </div>

    <script src="https://code.jquery.com/jquery-git.js"></script>
    <script>
        $('a').click(function(e){
            console.log("A Tag clicked");
            //e.preventDefault();
            e.stopPropagation
            return false;
        })

        $('#result').click(function(){
            console.log("Div id result just clicked")
        })
    </script>
Created with love and passion.