stopPropagation vs. stopImmediatePropagation

stopPropagation will prevent any parent handlers from being executed will prevent any parent handlers and also any other handlers from executing stopImmediatePropagation

Quick example from the jquery documentation:

$("p").click(function(event) {
  event.stopImmediatePropagation();
});

$("p").click(function(event) {
  // This function won't be executed
  $(this).css("background-color", "#f00");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>example</p>

Note that the order of the event binding is important here!

$("p").click(function(event) {
  // This function will now trigger
  $(this).css("background-color", "#f00");
});

$("p").click(function(event) {
  event.stopImmediatePropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>example</p>

Surprisingly, all other answers only say half the truth or are actually wrong!

• e.stopImmediatePropagation() stops any further handler from being called for this event, no exceptions
• e.stopPropagation() is similar, but does still call all handlers for this phase on this element if not called already

What phase?

E.g. a click event will always first go all the way down the DOM (called “capture phase”), finally reach the origin of the event (“target phase”) and then bubble up again (“bubble phase”). And with you can register multiple handlers for both capture and bubble phase independently. (Target phase calls handlers of both types on the target without distinguishing.)addEventListener()

And this is what the other answers are incorrect about:

• quote: “event.stopPropagation() allows other handlers on the same element to be executed”
  • correction: if stopped in the capture phase, bubble phase handlers will never be reached, also skipping them on the same element
• quote: “event.stopPropagation() [...] is used to stop executions of its corresponding parent handler only”
  • correction: if propagation is stopped in the capture phase, handlers on any children, including the target aren’t called either, not only parents
  • ...and: if propagation is stopped in the bubble phase, all capture phase handlers have already been called, including those on parents

_{A fiddle and mozilla.org event phase explanation with demo.}