Menu
I understand that if I return false it's essentially calling e.preventDefault() and e.stopPropagation.
My question lies in the decision of when I would want to continue event flow vs stopping it altogether. Could we list some real-world situations where I would want to use e.preventDefault() instead of return false and vice-versa to paint a clearer picture for me?
EDIT:
I'm a visual learner and seeing how something works, as opposed to reading about it, is how I understand why it works. I would be most appreciative to anyone who could post code examples for me.
EDIT:
Based on @Pointy's answer and comments, I created a working jsFiddle demo for those visual learners out there. I think it sums it up quite nicely.
480
You might want to use "preventDefault()" on a "click" handler for a "submit" button, but not return false. Why? Because you may have a "local" handler for the button that makes some decision about whether to proceed with form submission. However, there may be other handlers set up with ".delegate()" or ".live()", that do other interesting things based on button clicks, so I would want to allow the event to bubble up to those.
edit — it's very important to note that the convention of having a false return value stop both propagation (bubbling) and default behavior is a jQuery thing, and not native.
edit more By way of illustration, consider the following HTML:
<body>
<form name='foo' action='whatever'>
<!-- ... -->
<input type='submit' value='Go' id='mainSubmit'>
</form>
</body>
Now if I wanted to have some sort of fancy animation happen on any button click on the page, I might have some code that wires that up via ".delegate()":
// provide entertaining animation upon button clicks
$('body').delegate('input:submit, input:button, button', 'click', function() {
$(this).performExcitingAnimation();
});
For that submit button in the form, I may want to do form validation to decide whether the form can really be submitted:
$('#mainSubmit').click(function(e) {
if ($(this).closest('form').valid()) return true;
$('#errorBox').text("Uh oh something is wrong");
e.preventDefault(); // ... instead of return false
});
If that handler had used return false; instead of calling the "preventDefault()" method, then the event would not bubble up to the delegated handler and the user would be sadly deprived of some exciting button animation.
172
I use return false in form submits. Sometimes I have forms where I need to ask the user if they want to continue and if they say no I return false to stop the event. There are other variations of those events that are all basically the same thing. You start an event, decide if you don't want to continue, and return false to stop it.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
