Question: What's the difference between `event.stopPropagation()` and `event.stopImmediatePropagation()`?

Answer: 
**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 `addEventListener()` you can register multiple handlers for both capture and bubble phase independently. (Target phase calls handlers of both types on the target without distinguishing.)

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](https://jsfiddle.net/siemer/3qfo57zj/17/) and mozilla.org [event phase](https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase) explanation with demo.
`event.stopPropagation` will prevent handlers on parent elements from running.  

Calling `event.stopImmediatePropagation` will also prevent other handlers on the same element from running.