The difference between ‘return false;’ and ‘e.preventDefault();’
Have you ever seen those two things (in the title) being used in jQuery? Here is a simple example:
$("a").click(function() {
$("body").append($(this).attr("href"));
return false;
}That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:
$("a").click(function(e) {
$("body").append($(this).attr("href"));
e.preventDefault();
}So what’s the difference?
The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or “bubbling up”) the DOM. The you-may-not-know-this bit is that whenever an event happens on an element, that event is triggered on every single parent element as well. So let’s say you have a box inside a box. Both boxes have click events on them. Click on the inner box, a click will trigger on the outer box too, unless you prevent propagation. Like this:
So in other words:
function() {
return false;
}
// IS EQUAL TO
function(e) {
e.preventDefault();
e.stopPropagation();
}It’s all probably a lot more complicated than this and articles like this probably explain it all a lot better.
I’ve never known what “return false” did until now. Does it always prevent the default action, or does it depend on the context?
Dude are you new to web development?
return false is one of the oldest sentences in programming.
god bless all of you “web developers” who dont know a thing about porgramming.
From following the link in his name, I would imagine he might be a film guy, and I wouldn’t necessarily expect him to know anything at all about web dev.
The first reply was completely unnecessary. The reason people come to CSS-Tricks is to learn, not to be ridiculed by those who apparently already know everything.
I’ve already learned a TON of just basic things from Chris, and I’m sure others (professionals, even) have experienced the same.
Yeah, neither did I! I guess, then, that it is wiser to just prevent the default from happening than stopping all the propagation (follow the flow, kind of…)
Thanks Chris for clearing the difference. I always thought that they are the same :P
I never understood “Bubbling Up” until now!
Does this imply that the return false method is faster or less js intensive?
Apparently, yes:
“…if your document structure is very complex [...] you may save system resources by turning off bubbling.”
— like this
I’ve written a tutorial about events, maybe step 11 might clear things up, even though it’s about ActionScript 3.0, the theory behind bubbling up (event flow) is the same.
http://active.tutsplus.com/tutorials/actionscript/a-close-look-at-the-actionscript-30-event-framework/
If there is javacsript error in page, using return false browser will perform default action. That can be avoid using preventDefault()
Example:
Nice.
This is a good example emphasizing the flexibility of e.preventDefault(). Namely that it can be called at ny time. Code can be put all before, all after or even around it. (like it in if() statement)
if you got 2 handlers on an element, return false prevents the execution of the second handler also. Well I think return false is the only way you can prevent execution of additional handlers on the same element.
At least I found it. The correct way return false works is (jQuery):
function() {
return false;
}
// IS EQUAL TO
function(e) {
e.preventDefault();
e.stopImmediatePropagation();
}
I was wondering about that just the other day!! I was using
return false;almost always and never knew the difference between them.Never knew that, thanks for the information.
My favorite example of this to show off is something like this:
哥，你写的代码我看不懂啊，真让人蛋疼！！！！讲中文塞！！！
Nice. Now that I’ve learned something for the day, I’m going back to sleep. :)
Handy tip, cheers Chris :)
Very useful ! Thanks. I’m gonna use e.preventDefault() a lot more now :)
This might be a little overkill but to play it safe maybe try this:
e.preventDefault(); can actually be used to create drag & drop interfaces on touch screen devices to prevent the default scroll or zoom behavior. It’s pretty nice.
As always Chris, great article.
I always used return false;
I never even knew about e.preventDefault();
So thanks again! Keep it going!!
I want to know more about javascript. But I haven’t find the simple and effective way to learn. Somebody can help me ?
i can .
说的真好。就是这么回事。i am from China
Well that was well worth the short read. I am not sure why, but I always used preventDefault. I believe I will go with return false now, as that should be the faster and more efficient way. Nice post Chris.
I usually use return false but I think feroc1ty and Mark have given great examples for when this isn’t the correct choice.
Thanks Chris! I still have one question, what exactly is “e”?
Is is an arbitrary variable name.
event.preventDefault();
Prevents the for example click event to be triggered, but if the selector used for the click event is in a scope of an other function event.preventDefault() will not work, as the event is being “bubbled” upwards in the scope, while event.stopPropagation will ‘kill’ the event even in a further scope…
I prefer using event.stopPropagation() instead of event.preventDefault() to prevent event bubbling