Difference between stopPropagation vs stopImmediatePropagation in JavaScript
Last Updated :
23 Jan, 2022
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. |
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...