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).
|
|
J Query Related Interview Questions |
|
---|---|
HTML 4 Interview Questions | HTML Interview Questions |
HTML 5 Interview Questions | Zend Interview Questions |
PHP and Jquery Interview Questions | HTML+Javascript Interview Questions |
J Query Interview Questions | Javascript Objects Interview Questions |
Javascript Advanced Interview Questions | CodeIgniter Interview Questions |
JqueryUI Interview Questions | Dynamic HTML Interview Questions |
XQuery Interview Questions | jQuery Mobile Interview Questions |
JSON (JavaScript Object Notation) Interview Questions | Advanced jQuery Interview Questions |
J Query Related Practice Tests |
|
---|---|
HTML 4 Practice Tests | HTML Practice Tests |
HTML 5 Practice Tests | Zend Practice Tests |
PHP and Jquery Practice Tests | J Query Practice Tests |
CodeIgniter Practice Tests | Dynamic HTML Practice Tests |
JSON (JavaScript Object Notation) Practice Tests | Advanced jQuery Practice Tests |
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.