jQuery event.stopImmediatePropagation() Method
Last Updated :
17 Nov, 2022
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:
Share your thoughts in the comments
Please Login to comment...