Difference between stopPropagation vs stopImmediatePropagation in JavaScript

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before Clicking the element:
  • After Clicking the <div> element:
    stopPropagation
  • After Clicking the <p> element:
    stopPropagation
    stopPropagation
  • After Clicking the <span> element:
    stopPropagation

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before Clicking the div element:
    stopImmediatePropagation
  • After clicking the div element:
    stopImmediatePropagation

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 handeler to be executed one by one. It will depend on you where you used this, that handeler will be the last one to be executed.
If you create a table containing <table>, <tr> and <td>. If you set three event handeler for <td> then other two event handeler will also run with this one. But in this case if you do the same things the other two event handelers won’t run.


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.