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