What I’ll write here is true for jQuery events,
For vanilla javascript events read @T.J. Crowder comment at the bottom of the answer
return false
inside a callback prevents the default behaviour. For example, in a submit
event, it doesn’t submit the form.
return false
also stops bubbling, so the parents of the element won’t know the event occurred.
return false
is equivalent to event.preventDefault()
+ event.stopPropagation()
And of course, all code that exists after the return xxx
line won’t be executed. (as with all programming languages I know)
Maybe you find this helpful:
Stop event bubbling – increases performance?
A “real” demo to explain the difference between return false
and event.preventDefault()
:
Markup:
<div id="theDiv">
<form id="theForm" >
<input type="submit" value="submit"/>
</form>
</div>
JavaScript:
$('#theDiv').submit(function() {
alert('DIV!');
});
$('#theForm').submit(function(e) {
alert('FORM!');
e.preventDefault();
});
Now… when the user submit the form, the first handler is the form submit, which preventDefault()
-> the form won’t be submitted, but the event bubbles to the div, triggering it’s submit handler.
Now, if the form submit’s handler would cancel the bubbling with return false
:
$('#theDiv').submit(function() {
alert('DIV!');
});
$('#theForm').submit(function(event) {
alert('FORM!');
return false;
// Or:
event.preventDefault();
event.stopPropagation();
});
The div wouldn’t even know there was a form submission.
What does return false
do in vanilla javascript events
return false from a DOM2 handler (
addEventListener
) does nothing at all (neither prevents the default nor stops bubbling; from a Microsoft DOM2-ish handler (attachEvent
), it prevents the default but not bubbling; from a DOM0 handler (onclick="return ..."
), it prevents the default (provided you include the return in the attribute) but not bubbling; from a jQuery event handler, it does both, because that’s a jQuery thing. Details and live tests here – T.J. Crowder