Difference between stopPropagation vs stopImmediatePropagation in JavaScript - GeeksforGeeks

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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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  
 
anikaseth98
adnanirshad158
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?