jQuery event bubbling
return false;
will prevent "bubbling". It's used to stop default actions like checking a checkbox, opening a select, a click, etc.
To stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.
From Caveats in jQuery .live()
Reasoning (thanks to @AlienWebguy):
The reason stopPropagation() doesn't work with live() is that live() binds the event to document so by the time it fires there's no where else for it to propagate.
What it says is that the live () method attach a handler to the document element and check the target of the event to see where it comes from. If the target match the selector, then it fires the eventHandler. All that repose on the bubbling event system.
In the example, the click handler on the p element, witch is an ancestor of the a element, cancel the bubbling by returning false. Then the document element will never receive the event, so it will not trigger the event handler.
The concept of "bubbling up" is like if you have a child element with a click event and you don't want it to trigger the click event of the parent. You could use event.stopPropagation().
event.stopPropagation() basically says only apply this click event to THIS CHILD NODE and don't tell the parent containers anything because I don't want them to react.
Event Capturing:
| |
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 \ / | |
| ------------------------- |
| Event CAPTURING |
-----------------------------------
Event Bubbling:
/ \
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| Event BUBBLING |
-----------------------------------
If you are using live() or delegate() you will need to return false;, though it may not work. Read the quote below.
Per jQuery docs:
Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.
In the past it was a platform issue, Internet Explorer had a bubbling model, and Netscape was more about capturing (yet supported both).
The W3C model calls for you be able to choose which one you want.
I think bubbling is more popular because, as stated there are some platforms that only support bubbling...and it sort of makes sense as a "default" mode.
Which one you choose is largely a product of what you are doing and what makes sense to you.
More info http://www.quirksmode.org/js/events_order.html
Another great resource: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/