Return false in Event handler - jQuery vs Vanilla

Return false in Event handler - jQuery vs Vanilla Example that shows return false behaving differently when using in jQuery bind event, and pure JS

by OmShiv

HTML

<div id="outer-div">
    Outer Div
    <div id="inner-div"> 
        <a id="inner-link" href="http://geekyogi.tumblr.com">Geekyogi</a>
    </div>
</div>

<div id="outer-div-jq">
    Outer Div - jQuery
    <div id="inner-div-jq"> 
        <a id="inner-link-jq" href="http://geekyogi.tumblr.com">Geekyogi - jQuery</a>
    </div>
</div>

CSS

div {
    border: 1px solid #888;
    border-radius: 3px;
    box-shadow: 0 0 10px #999;
    padding: 20px;
    margin: 30px;
}

div {
    background-color: #D8FAB9;
}

div > div {
    background-color: #FAF5B9;
}

JavaScript

document.getElementById('outer-div').onclick = function(e){
    alert('Event on Outer Div - '+ e.type);
    return false;
}

document.getElementById('inner-div').onclick = function(e){
    alert('Event on Inner Div - '+ e.type);
    return false;
}

document.getElementById('inner-link').onclick = function(e){
    alert('Event on Inner Link - '+ e.type);
    return false;
}
    
jQuery('#outer-div-jq').bind('click', function(e) {
    alert('Event on Outer Div - '+ e.type +' - jQuery');
    return false; // Does both e.preventdefault() and e.stopPropagation(); 
});

jQuery('#inner-div-jq').bind('click', function(e) {
    alert('Event on Inner Div - '+ e.type +' - jQuery');
    return false; // Does both e.preventdefault() and e.stopPropagation(); 
})

jQuery('#inner-link-jq').bind('click', function(e) {
    alert('Event on Inner Link - '+ e.type +' - jQuery');
    return false; // Does both e.preventdefault() and e.stopPropagation(); 
})