jQuery event bubbling

Question

I want to understand how exactly to interpret bubbling. Does it mean going up the HTML code hierarchy or something else?

Secondly, I was going through an example and I could not understand the last part where it says

The P-based click handler listens for the click event and then prevents it from being propagated (bubbling up)

What does this mean?

Pontine

Answer 1

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.

Bradfordbradlee

Hmm...sounds a bit confusing...So is it return false or stopPropogation() to stop event bubbling up? – Pontine

@test, return false is the answer – Bradfordbradlee

Hmm..interesting..most of the other answers say e.stopPropagation(); and you are saying return false..may be need to verify with jsfiddle example... – Pontine

@test, according to the jQuery documentation on live, e.stopPropagation() is not enough. I'm sure it works in chrome or whatever, but if you want true cross browser support return false. That is straight from the jQuery documentation. – Bradfordbradlee

return false not stop the bubbling – Xylem

This was helpful for me! For some reason, in my particular case, e.preventDefault(); e.stopPropagation(); didn't help me (though in most cases it seems to). – Basuto

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. – Macrospore

@Bradfordbradlee Great answer, exactly what I was looking for. I just put return false; into my .click handler after all that code in that handler and it solved my problem. Thanks. – Acarology

Answer 2

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/

Macrospore

All these times, didn't even know something like that existed. +1 for letting me learn something new! – Silvia

You'll likely find this image (via the w3c's DOM Level 3 Events spec) useful: i.imgur.com/qlV9Z.png – Wuhsien

Answer 3

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.

Furnishing

I was trying to phrase something like this, you beat me to it. – Ambala

Perfetto...this is what i was looking for..even though the 1st para is a bit tough to understand, i guess i'll have to read it multiple times to be able to understand...But point is, u have truly answered as per what my question is... – Pontine

Well I'm not natively english, that's why sometimes my sentences are difficult to understand... – Furnishing

Well...when I said "bit tough to understand", I did not meant the English language..Some concepts are difficult to explain...But you definitely have explained it in the BEST POSSIBLE WAY...sure even to beat any english guy... and BTW...even i am not natively english.. – Pontine

Answer 4

In the below example it is attaching a click event to anchor with id "anchor". This anchor is within a div which also has a click event attached. If we click on this anchor it is as good as we are clicking on the containing div. Now if we want to do some stuff on this anchor click but do not want the div's click to be fired we can stop the event bubling as below.

<div id="div">

<a href="google.com" id="anchor"></a>

</div>


$("#div").click(function(e){//On anchor click this event will not be fired as we have stop the event propagation in anchor click handler.

   //Do stuff here

});

$("#anchor").click(function(e){

   //Do stuff here

   //This line stops the event bubling and 
   //jquery has abstracted it in the event object to make it cross browser compatible.
   e.stopPropagation();
});

Invite

Answer 5

Also:

event.stopPropagation()

http://api.jquery.com/event.stopPropagation/

Endopeptidase

Answer 6

Yes, the event goes up the tree and if any element has a handler for that event it will be called. By adding return:false in a handler of one of the elements the event will be prevented from bubbling.

Guanabana

Answer 7

These two links provide clear and elaborate explanation on event bubbling (as well as commonly used event concepts).

http://jqfundamentals.com/chapter/events
http://www.mattlunn.me.uk/blog/2012/05/what-does-event-bubbling-mean/

From the first link

event will be triggered for the a element as well as for all of the elements that contain the a — all the way up to the document

From the second link

<div>
    <h1>
        <a href="#">
            <span>Hello</span>
        </a>
    </h1>
</div>

Lets assume we click the span, which causes a click event to be fired on the span; nothing revolutionary so far. However, the event then propagates (or bubbles) to the parent of the span (the ), and a click event is fired on that. This process repeats for the next parent (or ancestor) up to the document element.

Now let's put all this into the context of a DOM. The DOM is a... tree and each element is a node in the DOM tree. Bubbling is then merely the traversal of a node, some element to the root node, document (follow your parent until you can't anymore)

Mavis