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:
#1 event.preventDefault()
$('a').click(function (e) {
// custom handling here
e.preventDefault();
});
#2 return false
$('a').click(function () {
// custom handling here
return false;
};
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?
Source: Tips4all
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.
ReplyDeletee.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
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.
ReplyDelete$('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.
});
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.
ReplyDeletejQuery 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.
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/
ReplyDeleteYou 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.
ReplyDeleteI think
ReplyDeleteevent.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.