O que é stopPropagation

Tudo certo, Leonardo?

O stopPropagation() evita que o evento seja processado por outros elementos da hierarquia (elemento-pai, e elemento-filho).

A imagem abaixo mostra um cenário em que temos três "camadas" de elementos, e queremos ouvir pelo clique no elemento do meio.

Mas, como ele é um elemento-filho do elemento do topo, e também tem seu filho, os eventos de clique podem gerar outros comportamentos que talvez não sejam desejados.

Um exemplo real é:

Vamos supor que você possui uma tabela, quando o usuário clicar na tabela, você quer deixar ela selecionada. Mas cada linha tem um botão, e quando ele for clicado, você quer que a linha fique em modo de edição (troque os dados, por inputs).

Sem o stopPropagation(), pode ser que ao usuário clicar no botão de editar, a linha seja selecionada, porque o componente de linha "escutou" o clique.

Com o stopPropagation(), o evento não irá propagar e o comportamento vai ser o esperado.

Espero ter ajudado!

Nesse exemplo que você citou, quando o usuário clicar no botão de editar, o que se espera é abrir o campo para input e não selecionar a linha em questão?

Isso, Leonardo!

Basicamente, neste exemplo, queremos que em qualquer lugar da linha que o usuário clique, a linha seja selecionada exceto se o local do clique foi o botão. Então, quando ele clica no botão, esse evento não "sobe" para o componente da linha, e a linha apenas se torna editável.