Interrupção da Propagação de Eventos
Compreenda .stopPropagation() e .preventDefault() para controlar o fluxo de eventos, impedir ações padrão do navegador e gerenciar interações complexas entre eventos com eficiência.
Interrupção da Propagação de Eventos é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 2 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 3 aulas no total.
Controle seus eventos!
Eventos como cliques ou envios de formulários não acontecem apenas em um elemento. Eles geralmente percorrem o Modelo de Objetos do Documento (DOM).
Aprender a controlar esse fluxo é essencial para criar páginas da web precisas e interativas.
Impedindo ações padrão
Os navegadores têm ações padrão para muitos elementos HTML. Por exemplo:
- Clicar em uma tag
<a>navega para uma nova página. - Enviar um
<form>recarrega a página.
Usamos event.preventDefault() para interromper esses comportamentos integrados do navegador.
`preventDefault()` em ação
Tente clicar no link abaixo. Normalmente, ele levaria você para example.com, mas .preventDefault() interrompe essa navegação!
<!DOCTYPE html>
<html>
<head>
<title>Prevent Default</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Prevent Default Example</h1>
<a href="https://example.com" id="myLink">Click Me! (Should not navigate)</a>
<div id="output"></div>
<script>
$(document).ready(function() {
$('#myLink').on('click', function(event) {
event.preventDefault(); // Stop the link from navigating
$('#output').append('<p>Link click prevented! You\'re still here.</p>');
});
});
</script>
</body>
</html>Entendendo a propagação de eventos
Quando ocorre um evento em um elemento, como um clique, ele não aciona apenas os manipuladores desse elemento. Ele se propaga pela árvore do DOM.
- Ele aciona os manipuladores do elemento pai.
- Depois, os do avô.
- E assim por diante, até chegar a
<body>e<html>.
Esse percurso para cima é chamado de propagação de eventos.
Interrompa a propagação: `stopPropagation()`
Às vezes, você quer que um evento seja tratado apenas pelo elemento em que se originou ou por um elemento pai específico, sem afetar elementos de níveis superiores.
É nesse caso que event.stopPropagation() entra em ação. Ele impede que o evento continue se propagando pela árvore do DOM.
Exemplo de `stopPropagation()`
Clique na caixa interna. Sem stopPropagation(), as duas mensagens apareceriam. Com ele, apenas a mensagem da caixa interna aparece, pois a propagação é interrompida.
<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#outer {
padding: 20px;
background-color: lightblue;
border: 1px solid blue;
margin: 10px;
}
#inner {
padding: 20px;
background-color: lightcoral;
border: 1px solid red;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Stop Propagation Example</h1>
<div id="outer">
Outer Div (Click me!)
<div id="inner">
Inner Div (Click me!)
</div>
</div>
<div id="log"></div>
<script>
$(document).ready(function() {
$('#outer').on('click', function() {
$('#log').append('<p>Outer Div clicked!</p>');
});
$('#inner').on('click', function(event) {
event.stopPropagation(); // Stop bubbling here
$('#log').append('<p>Inner Div clicked!</p>');
});
});
</script>
</body>
</html>Usos práticos da interrupção da propagação
stopPropagation() é útil em cenários como:
- Janelas modais: Impedir que cliques dentro de uma janela modal a fechem ao acionar um clique na sobreposição.
- Menus suspensos aninhados: Manter aberto um menu suspenso filho quando o elemento pai é clicado.
- Componentes de interface complexos: Garantir que os manipuladores de eventos de componentes específicos não interfiram nos ouvintes globais.
O objeto de evento
Tanto .preventDefault() quanto .stopPropagation() são métodos do objeto de evento. Esse objeto é passado como argumento para a função manipuladora de eventos.
O objeto de evento contém muitas informações úteis sobre o evento ocorrido, como seu tipo, o elemento de destino e as coordenadas do mouse.
<!DOCTYPE html>
<html>
<head>
<title>Event Object</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Event Object Properties</h1>
<button id="myButton">Click Me</button>
<div id="output"></div>
<script>
$(document).ready(function() {
$('#myButton').on('click', function(event) {
$('#output').empty(); // Clear previous output
$('#output').append('<p>Event Type: <code>' + event.type + '</code></p>');
$('#output').append('<p>Target Element ID: <code>' + event.target.id + '</code></p>');
$('#output').append('<p>Mouse X Position: <code>' + event.pageX + '</code></p>');
$('#output').append('<p>Mouse Y Position: <code>' + event.pageY + '</code></p>');
});
});
</script>
</body>
</html>Combinando os dois métodos
Às vezes, você precisa usar .preventDefault() e .stopPropagation(). Eles resolvem problemas diferentes:
.preventDefault(): Interrompe a ação padrão do navegador..stopPropagation(): Impede que o evento percorra o DOM para cima.
Por exemplo, um botão dentro de um componente complexo pode precisar impedir seu comportamento padrão de clique e também impedir que o clique acione os manipuladores dos elementos pais.
Entendendo o controle de eventos
Você tem um link <a href="#" id="link"> dentro de uma div <div id="container">. Você quer impedir que o link navegue e também impedir que o evento de clique acione qualquer manipulador em #container.
Revisão: controle de eventos
Excelente trabalho! Você aprendeu a dominar o fluxo de eventos:
.preventDefault(): Interrompe a ação padrão do navegador para um evento, como a navegação de um link ou o envio de um formulário..stopPropagation(): Impede que um evento se propague pela árvore do DOM até os elementos pais.
Esses métodos poderosos oferecem controle preciso sobre o comportamento dos eventos em suas aplicações web, proporcionando experiências de usuário mais previsíveis e robustas.
Aprenda JavaScript com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 22
- Aulas
- 48
Perguntas Frequentes
A aula “Interrupção da Propagação de Eventos” é grátis?
Sim — o texto completo de “Interrupção da Propagação de Eventos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 3 aulas no total.
O que vou aprender em “Interrupção da Propagação de Eventos”?
Compreenda .stopPropagation() e .preventDefault() para controlar o fluxo de eventos, impedir ações padrão do navegador e gerenciar interações complexas entre eventos com eficiência. Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar jQuery Academy?
Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 3.
Quanto tempo leva a aula “Interrupção da Propagação de Eventos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de jQuery Academy?
Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Implementação de Delegação de Eventos Robusta
- Interrupção da Propagação de Eventos
- Criação e Disparo de Eventos Personalizados