jQuery API

event.stopPropagation()

Categories: Events > Event Object

event.stopPropagation()

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

  • version added: 1.0event.stopPropagation()

We can use event.isPropagationStopped() to determine if this method was ever called (on that event object).

This method works for custom events triggered with trigger(), as well.

Note that this will not prevent other handlers on the same element from running.

Additional Notes:

  • 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.

Example:

Kill the bubbling on the click event.

$("p").click(function(event){
  event.stopPropagation();
  // do something
});

Support and Contributions

Need help with event.stopPropagation() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to event.stopPropagation()? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

  • http://randomtweak.com randomtweak

    It’s worth noting that this will not stop any default behaviours (such as link clicks) and you might want to consider using http://api.jquery.com/event.preventDefault/ in addition to this method.

  • Fil Abreu

    stopPropagation() doesn't work when using .live() to bind events to elements. This should be documented or fixed.

    • Jorn

      In order to overcome this (before it's fixed) you can do the following.

      Situation:
      Clicking child elem will trigger events for both the child and the parent that are set with live() or delegate().

      Give the child a classname, or use another form of identification and put something like this in the parents' event handler code:
      if( $(e.target).hasClass('identifier') ) return false;

      • http://www.exid.nl/ Eric Mahieu

        thx Jorn, the idea of simply looking at the target class in the parents code saved me.

  • Daisybird

    Nice if this function could return the event enabling chaining syntax;
    $('#posts').trigger( jQuery.Event(“update”).stopPropagation() );

    Or have Event setup options obj?

  • MikeW

    i will also post this under stopPropagation:
    work around for .live() event propagation issues.
    nodes created dynamically will not receive the event until after their parent has received it.
    this will cause funkyness and stopPropagation and preventDefault will not solve this issue.
    To Fix: add the lines
    if(event.target != this){
    return true;
    }

    to the top of the parent nodes event handler. this will stop the parent event from firing when the event is actually addressed to a child node, and (unlike return false) will propagate the event to the intended node.

    I just saved you circa 1 hour of wtf

    • myriacl

      thx MikeW, you indeed saved me a lot of wtf !

    • http://derbenni.de Benjamin Hofmann

      MikeW, you are my hero of the day. This saved me from endless debugging :)

    • Dfd

      Can you describe where, specifically, in the code, the result of the event value is examined for a true value? I see where it is examined for false, but I don't see anywhere where a true value will cause any changes in behavior.

      • Umbrae

        return true just means “do nothing, just continue propagating this event.”

  • Umbrae

    return true just means “do nothing, just continue propagating this event.”