An event propagates or bubbles till the window object-level every time a registered event is called. For example, Let us consider a parent div element (“Div Parent”) that contains another child div element (“Div child”), and for both, a click event is registered. If child div is clicked, the event will be fired at all places i.e, at both parent and child objects.
StopPropagation() event method: Prevents propagation of any handlers at top-level DOM hierarchy to execute. It stops the click event from bubbling to the parent elements.
Example: In this method, after clicking the <div> element 1st event handler will occur after that nothing will happen. If you click the <p> element then the 2nd and 1st event handler will occur because <p> element is inside of <div> element but if you click <span> element only the 3rd event handler will occur, cause StopPropagation() event method stops the event from bubbling to the parent elements.
HTML
<!DOCTYPE html><html><head> <script src= </script> <script> $(document).ready(function() { $("span").click(function(event) { event.stopPropagation(); alert("The span element was clicked."); }); $("p").click(function(event) { alert("The p element was clicked."); }); $("div").click(function() { alert("The div element was clicked."); }); }); </script> <style> div { height: 120px; width: 300px; padding: 10px; margin: 50px; border: 2px solid black; background-color: purple; } p { background-color: orange; } span { background-color: cyan; } </style></head><body> <center> <div> <h1 style="color:lightgreen;"> GeeskforGeeks </h1> <p> Acomputer Science Portal for Geeks<br> <span>Click on this span element.</span> </p> </div> <p> event.stopPropagation() stops the click event from bubbling to the parent elements. </p> </center></body></html> |
Output:
- Before Clicking the element:
- After Clicking the <div> element:
- After Clicking the <p> element:
- After Clicking the <span> element:
StopImmediatePropagation() event method: Prevents both propagation of any other handlers and those at top level DOM hierarchy. It stops the other events which were assigned after this event.
Example: The StopImmediatePropagation() event stops the next event.
HTML
<!DOCTYPE html><html><head> <script src= </script> <script> $(document).ready(function() { $("div").click(function(event) { alert("'Event handler 1' executed"); event.stopImmediatePropagation(); }); $("div").click(function(event) { alert("'Event handler 2' executed"); }); $("div").click(function(event) { alert("'Event handler 3' executed"); }); }); </script> <style> div { height: 100px; width: 300px; padding: 10px; margin: 50px; border: 2px solid black; background-color: purple; } </style></head><body> <center> <div> <h1 style="color:lightgreen;"> GeeskforGeeks </h1> Click on this div element. </div> <p> event.stopImmediatePropagation() stop the second and third event. </p> </center></body></html> |
Output:
- Before Clicking the div element:
- After clicking the div element:
stopPropagation vs stopImmediatePropagation
| stopPropagation | stopImmediatePropagation |
|---|---|
| It will allow other handlers on the same element to be executed, prevent handlers on parent elements from running. | It will prevents every event from running. |
| It will allow more than one handler to be executed one by one. | It will depend on you where you used this, that handler will be the last one to be executed. |
| If you create a table containing <table>, <tr> and <td>. If you set three event handler for <td> then other two event handler will also run with this one. | But in this case if you do the same things the other two event handlers won’t run. |
