Stopping the Handler Execution Loop - J Query

Problem
You have several handlers bound to the same element/event combination.You want to, from within a handler, prevent the rest from being called, something like what event.stopPropagation()* does. The problem is that event.stopPropagation()only works for elements that are below the current element in the DOM hierarchy.

Solution

Since jQuery 1.3, event objects passed to handlers have a new method called
stopImmediatePropagation().† This method will do just that, and no subsequent event handler will be notified of the current event. It will also stop the event’s propagation, just like stopPropagation() does.
This method has been taken from ECMAScript’s DOM level 3 events specification.‡
If you want to consult the event object, to know whether this method has been called, you can do so by calling event.is Immediate Propagation Stopped(),§ which will return either true or false.

Discussion

Examples

Simple form validation.stopImmediatePropagation() can cancel the actual submit binding(
s) if a certain situation is met:

It can also be useful for disabling elements or blocking containers temporarily:

Disadvantages of this approach

While this new feature could be a lifesaver in some situations, you must be aware that basing your logic on this behavior isn’t all that safe. When you rely on this feature, you assume that the handlers will be executed in the order you expect and that no other handlers will get in the way.
While events bound with jQuery are executed in the same order they’re added, it’s not something the API strongly supports, meaning it could fail in some browsers or some special situations. It’s also possible that bindings from different plugins could collide because one could call stopImmediatePropagation() and the other wouldn’t get executed. This could cause unexpected problems that could take a long time to debug.
The conclusion is, don’t be afraid to use stopImmediatePropagation() if it really suits your problem, but do use it with caution and double-check all the event handlers involved.
You should rather think twice before using it in these situations:

• The listener is a “popular” DOM element that is also used by other plugins.

• The event is a common one like click or ready. There’s a greater chance of collisions.On the other hand, it should be pretty safe to use it in these situations:

• The listener is a DOM element that is dynamically created and used merely by one plugin.

• The event is a custom event like change-color or add User.

• You intentionally want to stop any bound handler (like in the second example).