event.preventDefault() vs. return false vs Event.stopPropagation() and other methods
The rundown:
- You can use
event.preventDefault()
if you only want to prevent the default of the event (in this case, submitting a form). - You can use
return false
(in a jQuery event handler like yours) if you want to both prevent the default and stop propagation of the event to ancestor elements. (Note that that's different from whatreturn false
means in native event handling, as I cover in this blog post.) - Using
event.stopPropagation()
(notEvent.stopPropagation()
) won't prevent the default action at all: the form will still be submitted. - Throwing an error from the handler won't prevent the default action of the event.
- Calling a function that doesn't exist is just throwing an error, see above.
event.preventDefault() vs. return false
return false
from within a jQuery event handler is effectively the same as calling both e.preventDefault
and e.stopPropagation
on the passed jQuery.Event object.
e.preventDefault()
will prevent the default event from occuring, e.stopPropagation()
will prevent the event from bubbling up and return false
will do both. Note that this behaviour differs from normal (non-jQuery) event handlers, in which, notably, return false
does not stop the event from bubbling up.
Source: John Resig
Any benefit to using event.preventDefault() over "return false" to cancel out an href click?
preventDefault vs return false when it comes to reactjs
When you call return false
in the DOM, it has some "magical" behavior which is implicit instead of explicit. When you register an event callback in React, you are not explicitly setting an event handler in the DOM because React is an abstraction to the DOM. React elements are part of a "virtual DOM" and you are no longer working directly with the DOM, therefore event handlers have layers of abstraction between your component handler and the DOM element itself.
Could React have implemented their API in such a way that return false;
mirrored this implicit behavior? Perhaps. But they have their own API and clearly chose not to.
Here is a good overview of how the DOM handles things when you return false
.
event.preventDefault() vs. return false (no jQuery)
The W3C Document Object Model Events Specification in 1.3.1. Event registration interfaces states that handleEvent
in the EventListener has no return value:
under 1.2.4. Event Cancelation the document also states that
handleEvent
This method is called whenever an event occurs of the type
for which the EventListener interface was registered. [...] No Return
Value
which should discourage you from using any effect that returning true / false could have in any browser and useCancelation is accomplished by calling the Event's preventDefault
method. If one or more EventListeners call preventDefault during any
phase of event flow the default action will be canceled.
event.preventDefault()
. Update
The HTML5 spec actually specifies how to treat a return value different. Section 7.1.5.1 of the HTML Spec states that
for everything but the "mouseover" event.If return value is a WebIDL boolean false value, then cancel the
event.
Conclusion
I would still recommend to use event.preventDefault()
in most projects since you will be compatible with the old spec and thus older browsers. Only if you only need to support cutting edge browsers, returning false to cancel is okay.
What's the difference between e.preventDefault(); and return false?
Returning false
from jQuery event handlers is equivalent to calling both, e.preventDefault
and e.stopPropagation
.
So the difference is that preventDefault
will only prevent the default event action to occur, i.e. a page redirect on a link click, a form submission, etc. and return false
will also stop the event flow.
Why does e.preventDefault() and return false disable the post?
registerButton is submit button and behavior of submit is to post form's data to the action that is mentioned in form tag. If you have not mentioned any action attribute in form tag then it will hit post action of same get action.
event.preventDefault() and return false stops your post back or further events.
In JavaScript event handling, why return false or event.preventDefault() and stopping the event flow will make a difference?
hopes this code can explain it to you...
html
<div>
<a href="index.html" class="a1">click me</a>
<a href="index.html" class="a2">click me</a>
</div>
jquery$('div').click(function(){
alert('I am from <div>');
});
$('a.a1').click(function(){
alert('I am from <a>');
return false; // this will produce one alert
});
$('a.a2').click(function(e){
alert('I am from <a>');
e.preventDefault(); // this will produce two alerts
});
demoor
$('div').click(function(){
alert('I am from <div>');
});
$('a').click(function(){
alert('I am from <a>');
});
$('a.a1').click(function(){
alert('I am from <a class="a1">');
return false;
});
$('a.a2').click(function(e){
alert('I am from <a class="a2">');
e.preventDefault();
});
demo 2
Related Topics
Node.Js Piping the Same Readable Stream into Multiple (Writable) Targets
Bootstrap: Open Another Modal in Modal
Properties of JavaScript Function Objects
Access Properties of the Parent with a Handlebars 'Each' Loop
Initializing Select with Angularjs and Ng-Repeat
Basic Authentication with Fetch
How to Reload/Refresh Jquery Datatable
Add Commas to a Number in Jquery
Find the Exact Height and Width of the Viewport in a Cross-Browser Way (No Prototype/Jquery)
How to Export Socket.Io into Other Modules in Nodejs
Read a Text File Using Node.Js
How to Sort an Associative Array by Its Values in JavaScript
Get Width Height of Remote Image from Url
Get the Current Year in JavaScript
How Do Cors and Access-Control-Allow-Headers Work
How to 'Await' on an Rx Observable