jQuery event bubbling

by

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/

More Related Contents:

  1. Direct vs. Delegated – jQuery .on()
  2. How to stop events bubbling in jQuery? [duplicate]
  3. Javascript: function doesnt work even though condition is met (hard for me to explain)
  4. Check if an image is loaded (no errors) with jQuery
  5. jQuery $(document).ready and UpdatePanels?
  6. jQuery 1.9 .live() is not a function
  7. How to debug JavaScript / jQuery event bindings with Firebug or similar tools?
  8. Can I find events bound on an element with jQuery?
  9. Getting value of select (dropdown) before change
  10. How can I detect pressing Enter on the keyboard using jQuery?
  11. Prevent scrolling of parent element when inner element scroll position reaches top/bottom?
  12. What is the difference between the mouseover and mouseenter events?
  13. How to fire an event on class change using jQuery?
  14. Long Press in JavaScript?
  15. Event when user stops scrolling
  16. jQuery scroll() detect when user stops scrolling
  17. jQuery: live() vs delegate()
  18. Fire jQuery event on div change
  19. Alternative to jQuery’s .toggle() method that supports eventData?
  20. Event delegation vs direct binding when adding complex elements to a page
  21. HTML5 dragleave fired when hovering a child element
  22. Javascript with jQuery: Click and double click on same element, different effect, one disables the other
  23. jQuery event delegation
  24. Open Select using Javascript/jQuery?
  25. Prevent firing focus event when clicking on div
  26. Bind events on dynamic created elements inserted by AJAX (check box)
  27. Catch scrolling event on overflow:hidden element
  28. Trigger for span text/html on changed
  29. jQuery .on() method doesn’t see new elements
  30. Cancel click event in the mouseup event handler

Leave a Comment