différence entre return false et e.preventDefault()
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: 665;
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();
});