El método stopPropagation() se usa para detener la propagación de llamadas de eventos. Si se llama a un evento padre, podemos detener la propagación de llamar a sus hijos usando el método stopProagration() y viceversa.
Sintaxis:
event.stopPropagation()
Valor devuelto: No devuelve ningún valor.
Ejemplo: En este ejemplo, cuando la casilla de verificación no está marcada y se hace clic en el div interno, el cuadro de confirmación se muestra 2 veces (uno para el div interno y otro para el div externo). Pero cuando se marca la casilla de verificación y se vuelve a hacer clic en el div interno, el cuadro de confirmación se muestra solo una vez debido al método de evento stopPropagation().
<!DOCTYPE html>
<html>
<head>
<title>DOM stopPropagation() Method</title>
<style>
#div1 {
background: lightgreen;
}
#div2 {
background: green;
color: white;
}
</style>
</head>
<body style="text-align:center">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>DOM stopPropagation() Method</h2>
<div id="div1" onclick="Geek2()">
GeeksforGeeks!
<div id="div2" onclick="Geek1(event)">
A computer science portal for geeks.
</div>
</div>
<br>
<input type="checkbox" id="c">
Stop propagation:
<script>
function Geek1(event) {
confirm("Inner div is clicked");
if (document.getElementById("c").checked) {
event.stopPropagation();
}
}
function Geek2() {
confirm("Outer div is clicked");
}
</script>
</body>
</html>
Salida: 
al hacer clic en Div interior con la casilla de verificación sin marcar: el cuadro de confirmación se mostrará dos veces.
Después de marcar la casilla de verificación: la casilla de confirmación se muestra solo una vez.
Navegadores compatibles: los navegadores compatibles con el método de evento stopPropagation() se enumeran a continuación:
- safari de manzana
- Google Chrome
- Firefox
- Ópera
- Internet Explorer 9.0
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA