Skip to content
Related Articles
Open in App
Not now

Related Articles

jQuery event.stopImmediatePropagation() Method

Improve Article
Save Article
  • Last Updated : 17 Nov, 2022
Improve Article
Save Article

The jQuery 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. 

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

HTML




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

 

Example 2: In this example, we will change the color of the single div by using this method.

HTML




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

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!