jQuery event.stopImmediatePropagation() Method
Last Updated : 11 Jul, 2025
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= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </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= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </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:
