Difference between stopPropagation vs stopImmediatePropagation in JavaScript

0 0 2 minutes read

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

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.