[Dúvida] .stopPropagation()?

O método event.stopPropagation() é usado dentro de um manipulador de eventos para interromper a propagação do evento, impedindo que ele continue a se propagar para outros elementos

<div id="outer" onclick="outerClick()">
  Clique em mim (Outer Div)!
  <div id="inner" onclick="innerClick()">
    Clique em mim também (Inner Div)!
  </div>
</div>

<script>
  function outerClick() {
    alert("Você clicou na Div Externa!");
  }

  function innerClick(event) {
    alert("Você clicou na Div Interna!");
    event.stopPropagation(); // Isso impede que o clique na Div Interna afete a Div Externa.
  }
</script>

Se você clicar na "Inner Div", verá a mensagem "Você clicou na Div Interna!" e depois a mensagem "Você clicou na Div Externa!" não aparecerá, porque event.stopPropagation() evitou que o clique se propagasse até a Div Externa.

Em JavaScript, os eventos podem se propagar de um elemento para outro na árvore DOM (Document Object Model) por padrão. Isso é conhecido como bubbling (borbulhamento) e ocorre nas fases de captura e de borbulhamento do evento.