Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery | event.stopImmediatePropagation() Method

  • Last Updated : 27 Feb, 2019

The event.stopImmediatePropagation() is an inbuilt method in jQuery used to stop the rest of the event handlers from being executed for the selected element.

Syntax:

event.stopImmediatePropagation()

Parameter: No parameter is required.

Return Value: This method return the selected element with the applied change.

Example-1: Here, only first pop box will appear after the this method will stop the other pop box to appear.






<!DOCTYPE html>
<html>
  
<head>
    <script src=
  </script>
    <style>
        body {
            width: 70%;
            height: 40%;
            font-size: 30px;
            padding: 20px;
            border: 2px solid green;
        }
          
        div {
            display: block;
            background-color: lightgrey;
            padding: 4px;
        }
    </style>
    
    <script>
        $(document).ready(function() {
            $("div").click(function(event) {
                alert("1st event executed");
                event.stopImmediatePropagation();
            });
            $("div").click(function(event) {
                alert("2nd event executed");
            });
            $("div").click(function(event) {
                alert("3rd event executed");
            });
        });
    </script>
</head>
  
<body>
  
    <div>Hello, Welcome to GeeksforGeeks.!</div>
  
</body>
  
</html>

Output :

Before click:

After click:

Example-2:




<!DOCTYPE html>
<html lang="en">
  
<head>
    <script src=
  </script>
    <style>
        body {
            width: 70%;
            height: 40%;
            font-size: 30px;
            padding: 20px;
            border: 2px solid green;
        }
          
        p {
            display: block;
            padding: 4px;
            height: 30px;
            width: 150px;
            background-color: lightgrey;
        }
          
        div {
            display: block;
            padding: 4px;
            height: 30px;
            width: 400px;
            background-color: lightgrey;
        }
    </style>
  
</head>
  
<body>
  
    <p>Hello, </p>
    <div>Welcome to GeeksforGeeks.!</div>
  
    <script>
        $("p").click(function(event) {
            event.stopImmediatePropagation();
        });
        $("p").click(function(event) {
            // This function will not executed
            $(this).css("background-color", "yellow");
        });
        $("div").click(function(event) {
            // This function will executed
            $(this).css("background-color", "green");
        });
    </script>
</body>
  
</html>

Output:
Before click:

After click on the “p” and “div” element. Event will only perform for the div element:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!