Como parar a propagação de evento em JavaScript

Neste artigo você vai aprender a como parar a propagação de evento em JavaScript, um problema também conhecido como bubbling

Fala programador(a), beleza? Bora aprender mais sobre eventos em JavaScript!

A propagação de eventos acontece quando um elemento interno tem um evento e uma ação no elemento externo também o ativa

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Ou você tem evento nos dois, e está ativando os dois eventos com uma ação

Este problema é chamado de event bubbling, mas também podemos vê-lo como recurso

Pois em algumas situações acaba sendo útil

Para remover este comportamento, você deve passar o argumento de evento na função que está tratando o mesmo

Este argumento está presente em todos os eventos

E depois utilizar o método stopPropagation, assim o evento não é mais propagado

Veja um exemplo:

function myFunction(e) {

    // para a propagação
    e.stopPropagation();
    
    // continua código do evento...
}

Após o método, você continua normalmente com o código que a sua função executa

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você viu como parar a propagação de evento em JavaScript

Utilizamos o objeto de evento, chamado event

E nele ativamos o método stopPropagation, isso é o que basta para parar o evento

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!