Event.Preventdefault() VS. Return False (No Jquery)

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.

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.

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.

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

jQuery .preventDefault and .stopPropagation used inside a function returning false

Look at the jQuery source

if (ret !== undefined) {
    if ((event.result = ret) === false) {
        event.preventDefault();
        event.stopPropagation();
    }
}

if an event handler return false jQuery will call .preventDefault() and .stopPropagation() on the event

return false or e.preventdefault not working

Never use onclick with button declaration because it's like tight coupling coding standards. Instead do it like this:

<button type="submit" id="submitBtn">submit</button>

$("#submitBtn").on('click',function(event){

    var value = $("#concept_name").val();

    if(value.length > 50){
       alert("Maximum limit is 50 character");
       event.preventDefault();
    }

});

---

Related Topics