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.
‘e’ is a name of an argument variable. This variable is a jQuery
eventobject, that contains all information about the event. All event handlers in jQuery receive it as first argument.To dive deeper,
stopPropagation,preventDefaultare methods of this event object.More Details
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
Example for a delete link and JS confirmation:
JS:
or
Hello Chris.
I’m just working on some example where I have to attach “active” class on some div, and detach that class on second click. But, I want not to detach that “active” class if I click on one of the links inside of that div. Is “return false” for those inside links the best solution for me? It works, I’m just wondering if it’s the best solution.
There’s a major misconception being put across here about the use of
return falsein events.jQuery handles return false as an internal flag — using it to mean “prevent default and stop propagation”. Vanilla event listeners do not handle it the same way.
If you’re not using jQuery then return false in
addEventListeneris nothing but a legacy hangover — a shorthand fore.returnValue = false, which is deprecated syntax. It won’t behave consistently between browsers, but you never need to use it anyway.If you’re not using jQuery, don’t return at all, use any or all of:
preventDefault()to block a default action,stopPropagation()to stop the event bubbling, orstopImmediatePropagation()to stop the event being dispatched to other handlers on the same element (though that last one is not as widely supported).If you are using jQuery, return false is equivalent to calling
e.preventDefault(); e.stopPropagation();(i.e. return false in jQuery is just a proprietary shortcut, it has no meaning of its own)
It might be worth mentioning that using return false in this manner is deprecated in current versions of jQuery and results in an error being logged to the console (something which will cause older versions of IE to throw an error as console.log() isn’t supported ). You should use e.preventDefault().
The example doesn’t seem to work at all on Firefox 24.6.0?