event.stopImmediatePropagation () es un método incorporado en jQuery que se usa para evitar que el resto de los controladores de eventos se ejecuten para el elemento seleccionado.
Sintaxis:
event.stopImmediatePropagation()
Parámetro: No se requiere ningún parámetro.
Valor devuelto: este método devuelve el elemento seleccionado con el cambio aplicado.
Ejemplo-1: Aquí, solo aparecerá el primer cuadro emergente después de que este método detenga la aparición del otro cuadro emergente.
<!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>
Producción :
Antes de hacer clic:
Después de hacer clic:
Ejemplo-2:
<!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>
Salida:
Antes de hacer clic:
Después de hacer clic en el elemento «p» y «div». El evento solo funcionará para el elemento div: