Event.Preventdefault() Vs. Return False

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?

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 what return false means in native event handling, as I cover in this blog post.)
• Using event.stopPropagation() (not Event.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 (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:

handleEvent
This method is called whenever an event occurs of the type
for which the EventListener interface was registered. [...] No Return
Value

under 1.2.4. Event Cancelation the document also states that

Cancelation 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.

which should discourage you from using any effect that returning true / false could have in any browser and use 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

If return value is a WebIDL boolean false value, then cancel the
event.

for everything but the "mouseover" 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.

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.

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
});​

demo

or

$('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

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.

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.

---

Related Topics