Skip to content
Related Articles

Related Articles

Improve Article

Difference between stopPropagation vs stopImmediatePropagation in JavaScript

  • Difficulty Level : Basic
  • Last Updated : 09 Sep, 2021
Geek Week

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:
    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.

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:
    stopImmediatePropagation
  • After clicking the div element:
    stopImmediatePropagation

stopPropagation vs stopImmediatePropagation

stopPropagationstopImmediatePropagation
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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :