O que é um evento borbulhante?
Ou seja, quando vários divs são aninhados; ou seja, um relacionamento pai-filho é estabelecido. Quando o div pai e o div filho ingressam no evento onclick, quando o evento onclick do div filho é acionado, o div filho executa o correspondente. operação js. Mas o evento onclick da div pai também será acionado. Isso resulta em vários níveis de simultaneidade de eventos, levando ao caos da página. Este é um evento borbulhante.
Como eliminar eventos borbulhantes
Impedir que eventos JavaScript borbulhem (cancelBubble, stopPropagation)
O código a seguir pode explicar muito bem o que é o efeito borbulhante e o que é a eliminação do efeito borbulhante?
Copie o código do código da seguinte forma:
<html>
<cabeça>
<title> Impedir que eventos JavaScript borbulhem (cancelBubble, stopPropagation)</title>
<meta name="keywords" content="JavaScript, evento borbulhando, cancelBubble, stopPropagation" />
<script type="texto/javascript">
function façaAlgo(obj,evt) {
alerta(obj.id);
var e=(evt)?evt:window.event; //Determine o tipo de navegador e use cancelBubble em navegadores baseados no kernel do IE
if (janela.evento) {
e.cancelBubble=true;
} outro {
//e.preventDefault(); //Suporta o método stopPropagation em navegadores baseados no kernel do Firefox
e.stopPropagation();
}
}
</script>
</head>
<corpo>
<div id="parent1" onclick="alert(this.id)">
<p>Esta é a div parent1.</p>
<div id="child1" onclick="alert(this.id)">
<p>Este é o filho1.</p>
</div>
<p>Esta é a div parent1.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)">
<p>Esta é a div parent2.</p>
<div id="child2" onclick="doSomething(this,event);">
<p>Este é o filho2.
</div>
<p>Esta é a div parent2.</p>
</div>
</body>
</html>
Depois de copiar o código diretamente, ao clicar em child1, não apenas a caixa de diálogo child1 aparecerá, mas também a caixa de diálogo parent1.
Este é o evento borbulhante
Mas clicar em chile2 exibirá apenas child2, mas não parent2. Este é o efeito da aplicação de efeitos especiais que evitam eventos de bolha.