¿Qué es un evento burbujeante?
Es decir, cuando se anidan varios divs, es decir, se establece una relación padre-hijo. Cuando el div padre y el div hijo se unen al evento onclick, cuando se activa el evento onclick del div hijo, el div hijo realiza el correspondiente. operación js. Pero también se activará el evento onclick del div principal. Esto da como resultado múltiples niveles de simultaneidad de eventos, lo que genera un caos en la página. Este es un evento burbujeante.
Cómo eliminar eventos burbujeantes
Evitar que los eventos de JavaScript se burbujeen (cancelBubble, stopPropagation)
El siguiente código puede explicar muy bien qué es el efecto burbujeante y cuál es la eliminación del efecto burbujeante.
Copie el código de código de la siguiente manera:
<html>
<cabeza>
<title> Evitar que los eventos de JavaScript se propaguen (cancelBubble, stopPropagation)</title>
<meta name="palabras clave" content="JavaScript, propagación de eventos, cancelBubble, stopPropagation" />
<tipo de script="texto/javascript">
función hacer algo (obj,evt) {
alerta(obj.id);
var e=(evt)?evt:window.event; //Determine el tipo de navegador y use cancelBubble en navegadores basados en el kernel de IE
si (ventana.evento) {
e.cancelBubble=verdadero;
} demás {
//e.preventDefault(); //Soporta el método stopPropagation en navegadores basados en el kernel de Firefox
e.stopPropagation();
}
}
</script>
</cabeza>
<cuerpo>
<div id="padre1" onclick="alerta(este.id)">
<p>Este es el div padre1.</p>
<div id="child1" onclick="alerta(this.id)">
<p>Este es niño1.</p>
</div>
<p>Este es el div padre1.</p>
</div>
<br />
<div id="padre2" onclick="alerta(este.id)">
<p>Este es el div padre2.</p>
<div id="child2" onclick="hacerAlgo(este,evento);">
<p>Este es child2. Will bubble.</p>
</div>
<p>Este es el div padre2.</p>
</div>
</cuerpo>
</html>
Después de copiar el código directamente, cuando hace clic en hijo1, no solo aparecerá el cuadro de diálogo hijo1, sino también el cuadro de diálogo padre1.
Este es el evento burbujeante
Pero al hacer clic en chile2 solo aparecerá child2 pero no parent2. Este es el efecto de aplicar efectos especiales que evitan eventos burbujeantes.