jQuery event bubbling

up vote8down votefavorite 5

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? javascript jquery javascript-events live event-bubbling share|improve this question edited Jun 28 at 17:09 Frank Schmitt 10.4k21236 asked Aug 4 '11 at 17:26 testndtv 7,21429115226

Some info regarding difference between : preventDefault(), stopPropagation(), stopImmediatePropagation(), return false markupjavascript.blogspot.in/2013/10/… –  Mandeep Pasbola Oct 27 at 16:50 add comment

6 Answers

activeoldestvotes

up vote4down voteaccepted

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. share|improve this answer edited Mar 22 at 15:53 answered Aug 4 '11 at 17:28 Joe 31k54473

@Alien, api.jquery.com/live In the Caveats section –  Joe Aug 4 '11 at 17:38  Hmm...sounds a bit confusing...So is it return false or stopPropogation() to stop event bubbling up? – testndtv Aug 4 '11 at 17:47 @Joey thanks~ :) –  AlienWebguy Aug 4 '11 at 17:48 @test, return false is the answer –  Joe Aug 4 '11 at 17:56 1   The reason stopPropagation() doesn't work with live() is that live() binds the event to documentso by the time it fires there's no where else for it to propagate. –  AlienWebguy Mar 22 at 15:16 show 4 more comments

up vote16down vote

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/ share|improve this answer edited Aug 4 '11 at 18:18 answered Aug 4 '11 at 17:29 AlienWebguy 36.7k33268

All these times, didn't even know something like that existed. +1 for letting me learn something new! – Mrchief Aug 4 '11 at 17:39 Yeah me too! I hate when people downvote without commenting. –  Mrchief Aug 4 '11 at 17:45 1   You'll likely find this image (via the w3c's DOM Level 3 Events spec) useful: i.imgur.com/qlV9Z.png – user1385191 Aug 4 '11 at 18:05 +1 for the diagrams. –  Johnny5 Aug 4 '11 at 19:01 add comment