El método event.stopPropagation() es un método incorporado en jQuery que se utiliza para detener la propagación de Windows. En el árbol DOM , al configurar un evento con el elemento secundario y el elemento principal, si presiona el evento del elemento secundario, también llamará al elemento secundario y al elemento principal. Entonces, con la ayuda de este método, esta ventana emergente no aparecerá para el otro elemento, excepto el elemento seleccionado.
Sintaxis:
event.stopPropagation()
Parámetros: Acepta un solo parámetro que es obligatorio. Este parámetro proviene de la función de enlace.
Valor devuelto: este método devuelve el elemento seleccionado con los cambios especificados realizados por el método stopPropagation().
Ejemplo: Este ejemplo ilustra el método event.stopPropagation().
<!DOCTYPE html>
<html>
<head>
<title>
jQuery event.stopPropagation() Method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
.main {
border:1px solid green;
padding:20px;
width:60%;
}
</style>
<!-- Script to use jQuery event.stopPropagation() Method -->
<script>
$(document).ready(function() {
$(".main").click(function() {
alert("Main div element");
});
$(".GFG").click(function(event) {
event.stopPropagation();
alert("Nested div element");
});
$(".geeks").click(function(event) {
alert("Second nested div element");
});
});
</script>
</head>
<body>
<!-- Click on element to display alert message -->
<div class="main">
GeeksforGeeks
<div class="GFG">
A computer science portal
<div class="geeks">
Welcome to GeeksforGeeks
</div>
</div>
</div>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
