event.preventDefault() vs. return false
51
When I want to prevent other event handlers from executing after a certain event is fired, I can use one of two techniques. I'll use jQuery in the examples, but this applies to plain-JS as well:

Is there any significant difference between those two methods of stopping event propagation?

For me, return false; is simpler, shorter and probably less error prone than executing a method. With the method, you have to remember about correct casing, parenthesis, etc. 

Also, I have to define the first parameter in callback to be able to call the method. Perhaps, there are some reasons why I should avoid doing it like this and use preventDefault instead? What's the better way?
improve this question | comment
Kayleigh Beer Created at: 2013-11-13 17:07:10 UTC By Kayleigh Beer
Note that jQuery's preventDefault does not prevent other handers from executing. That's what stopImmediatePropagation is for. - Gaston Gutkowski
@CrescentFresh, it does prevent other (subsequently bound) handlers from executing... on the DOM node the event is fired on. It just doesn't prevent propagation. - Garrison Hyatt
These are not "two methods of stopping event propagation?" e.preventDefault(); prevents the default action, it does not stop event propagation, which is done by e.stopPropagation(). - Abby Wunsch
This question and its answers are about jQuery. If you came here searching for a plain javascript answer, see event.preventDefault() vs. return false (no jQuery) - Frankie Goyette PhD
@Oriol jQuery is used in the question only to simplify the code examples. If you rewrite the jQuery selectors to plain-JS code you'll end up with the same problem and that's the reason that makes your question a duplicate. - Camille Kassulke
8 Answers
0
i think the best way to do is use preventDefault because if some exception raised in the handler then the return false statement will be skipped and the behavior will be opposite to what you want so it's better to use event.preventDefault() method

but if sure that the code wont trigger any exceptions then u can go with any of the method by your wish.

if u still want to go with the return false
then you can put your entire handler code in try catch block like below

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});

0
This is not, as you've titled it, a "JavaScript" question; it is a question regarding the design of jQuery, as indicated in Christoph's comment.

jQuery and the previously linked citation from John Resig (in karim79's message) seem to be the source misunderstanding of how event handlers in general work. 

Fact: An event handler that returns false prevents the default action for that event. It does not stop the event propagation. Event handlers have always worked this way, since the old days of Netscape Navigator.

The following documentation from MDC explains how return false in an event handler works:
https://developer.mozilla.org/en/XUL_Tutorial/More_Event_Handlers#Prevent_Default_Action

What happens in jQuery is not the same as what happens with event handlers. DOM event listeners and MSIE "attached" events are a different matter altogether. 

For further reading, see attachEvent on MSDN and the W3C DOM 2 Events documentation.
0
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

http://www.mail-archive.com/jquery-en@googlegroups.com/msg71371.html
0
From my experience, there is at least one clear advantage when using event.preventDefault() over using return false. Suppose you are capturing the click event on an anchor tag, otherwise which it would be a big problem if the user were to be navigated away from the current page. If your click handler uses return false to prevent browser navigation, it opens the possibility that the interpreter will not reach the return statement and the browser will proceed to execute the anchor tag's default behavior.

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});


The benefit to using event.preventDefault() is that you can add this as the first line in the handler, thereby guaranteeing that the anchor's default behavior will not fire, regardless if the last line of the function is not reached (eg. runtime error).

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

0
return false is doing 3 separate things when you call it:

event.preventDefault();
event.stopPropagation();
Stops callback execution and returns immediately when called.
See jQuery Events: Stop (Mis)Using Return False for more information and examples.
0
Generally, your first option (preventDefault()) is the one to take, but you have to know what context you're in and what your goals are. A great article on the matter: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
0
You can hang alot of functions on 'click' event for one element. I can you be sure false one will be the last one to fire? PreventDefault on the other hand will definitely prevent only default behavior of element.
0
I think 

event.preventDefault()

is the w3c specified way of canceling events. You can read this in the w3c spec

Event cancelation

Also you can't use return false in every situation. When giving a javascript function in the href attribute and if you return false then the user will be redirected to a page with false string written.
Your Answer