Un evento se propaga o burbujea hasta el nivel de objeto de la ventana cada vez que se llama a un evento registrado. Por ejemplo, consideremos un elemento div principal («Div principal») que contiene otro elemento div secundario («Div secundario»), y para ambos, se registra un evento de clic. Si se hace clic en child div, el evento se disparará en todos los lugares, es decir, en los objetos padre e hijo.
Método de evento StopPropagation(): evita la propagación de cualquier controlador en la jerarquía DOM de nivel superior para ejecutar. Evita que el evento de clic se propague a los elementos principales.
Ejemplo:En este método, después de hacer clic en el elemento <div>, se producirá el primer controlador de eventos y luego no pasará nada. Si hace clic en el elemento <p>, se producirá el segundo y el primer controlador de eventos porque el elemento <p> está dentro del elemento <div>, pero si hace clic en el elemento <span>, solo se producirá el tercer controlador de eventos, lo que provocará el evento StopPropagation() El método evita que el evento se propague a los elementos principales.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("span").click(function(event) {
event.stopPropagation();
alert("The span element was clicked.");
});
$("p").click(function(event) {
alert("The p element was clicked.");
});
$("div").click(function() {
alert("The div element was clicked.");
});
});
</script>
<style>
div {
height: 120px;
width: 300px;
padding: 10px;
margin: 50px;
border: 2px solid black;
background-color: purple;
}
p {
background-color: orange;
}
span {
background-color: cyan;
}
</style>
</head>
<body>
<center>
<div>
<h1 style="color:lightgreen;">
GeeskforGeeks
</h1>
<p>
Acomputer Science Portal for Geeks<br>
<span>Click on this span element.</span>
</p>
</div>
<p>
event.stopPropagation() stops the click event
from bubbling to the parent elements.
</p>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el elemento:
- Después de hacer clic en el elemento <div>:
- Después de hacer clic en el elemento <p>:
- Después de hacer clic en el elemento <span>:
Método de evento StopImmediatePropagation(): evita la propagación de cualquier otro controlador y aquellos en la jerarquía DOM de nivel superior. Detiene los otros eventos que fueron asignados después de este evento.
Ejemplo: el evento StopImmediatePropagation() detiene el siguiente evento.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("div").click(function(event) {
alert("'Event handler 1' executed");
event.stopImmediatePropagation();
});
$("div").click(function(event) {
alert("'Event handler 2' executed");
});
$("div").click(function(event) {
alert("'Event handler 3' executed");
});
});
</script>
<style>
div {
height: 100px;
width: 300px;
padding: 10px;
margin: 50px;
border: 2px solid black;
background-color: purple;
}
</style>
</head>
<body>
<center>
<div>
<h1 style="color:lightgreen;">
GeeskforGeeks
</h1>
Click on this div element.
</div>
<p>
event.stopImmediatePropagation() stop
the second and third event.
</p>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el elemento div:
- Después de hacer clic en el elemento div:
stopPropagation vs stopImmediatePropagation
| detener la propagación | stopImmediatePropagation |
|---|---|
| Permitirá que se ejecuten otros controladores en el mismo elemento, evitará que se ejecuten controladores en elementos principales. | Evitará que se ejecuten todos los eventos. |
| Permitirá ejecutar más de un controlador uno por uno. | Dependerá de dónde haya usado esto, ese controlador será el último en ejecutarse. |
| Si crea una tabla que contiene <table>, <tr> y <td>. Si configura tres controladores de eventos para <td>, entonces otros dos controladores de eventos también se ejecutarán con este. | Pero en este caso, si hace lo mismo, los otros dos controladores de eventos no se ejecutarán. |
Publicación traducida automáticamente
Artículo escrito por MbonigabaAlliance y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA