différence entre return false et e.preventDefault()

by lespacedunmatin

HTML

<h1>Démo de la différence entre <code>return false</code> et <code>e.preventDefault()</code></h1>
<p>Le clic sur les liens doit :</p>
<ol>
    <li>Agrandir le cadre bleu ciel</li>
    <li>Changer la couleur du fond noir en jaune</li>
</ol>
<p>Mais l'utilisation de <code>return false</code> dans le second cas va bloquer la seconde partie du programme.</p>
<hr />
<ul id="test">
    <li><a href="http://www.google.com/">clic me for prevent default</a></li>
    <li><a href="http://www.yahoo.com/" id="false">clic me for false</a></li>
</ul>

CSS

#test li {
    padding: 1em;
    margin: 1em;
    background: black;
}
#test a {
    display: block;
    background: lightblue;
    padding: 1em;
    width: 50%;
}

JavaScript

var test = function (){

    function init(){
        var a = $('a');
        a.click(function(e){
            grow($(this));
            
            if ($(this).is('#false')) {
                return false;
            } else {
                e.preventDefault();
            }
            
        });
        a.parent().click(function(){
            changeBckColor($(this));
        });
    }
    
    function grow(elmt){
       elmt.width('+=50').height('+=50');
    }

    function changeBckColor(elmt){
       elmt.css({background: 'yellow'});
    }

    return {init:init}
}();

$(function(){
    test.init();
});