Use el método HTML DOM stopPropagation() para evitar que el evento se propague con el atributo onclick en línea que se describe a continuación:
HTML DOM stopPropagation() Método de evento : El método stopPropagation() se utiliza para detener la propagación de llamadas de eventos, es decir, se llama al evento principal. Podemos detener la propagación de llamadas a sus hijos utilizando el método stopPropagation() y viceversa.
Sintaxis:
event.stopPropagation()
Ejemplo 1: este ejemplo detiene la propagación del evento agregando el método stopPropagation al hacer clic en el elemento <span>.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to stop event propagation with
inline onclick attribute
</title>
<style>
div {
background: green;
}
span {
background: red;
color: white;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<div onclick= "alert('you clicked the div')">
<span onclick= "event.stopPropagation();
alert('you clicked Span element(inside the div)');">
Span Content
</span>
</div>
</body>
</html>
Producción:
- Antes de hacer clic en el elemento:
- Después de hacer clic en el elemento <span>:
Ejemplo 2: este ejemplo detiene la propagación del evento agregando el método stopPropagation() al hacer clic en el elemento <span>. Este ejemplo maneja el caso de Internet Explorer estableciendo window.event.cancelBubble en verdadero.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to stop event propagation with
inline onclick attribute
</title>
<style>
div {
background: green;
}
span {
background: red;
color: white;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<div onclick= "alert('you clicked the div')">
<span onclick= "StopEventPropagation(event);
alert('you clicked Span element(inside the div)');">
Span Content
</span>
</div>
<br>
<script>
function StopEventPropagation(event) {
if (event.stopPropagation) {
event.stopPropagation();
}
else if(window.event) {
window.event.cancelBubble=true;
}
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el elemento:
- Después de hacer clic en el elemento <span>:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA