Метод event.stopPropagation в JavaScript

Всплытие или погружение события по DOM-дереву можно прервать. Осуществляется это посредством вызова метода stopPropagation объекта event.

Прервём всплытие события click на элементе level-2:

<div id="level-1">
  1
  <div id="level-2">
    2
    <div id="level-3">3</div>
  </div>
</div>
<script>
  // назначим обработчик события click на элементе #level-1
  document.querySelector("#level-1").addEventListener("click", function (event) {
    console.log("click на элементе #level-1");
  });
  // назначим обработчик события click на элементе #level-2
  document.querySelector("#level-2").addEventListener("click", function (event) {
    // остановим всплытие события click на элементе level-2
    event.stopPropagation();
    console.log("click на элементе #level-2");
  });
  // назначим обработчик события click на элементе #level-3
  document.querySelector("#level-3").addEventListener("click", function (event) {
    console.log("click на элементе #level-3");
  });
</script>

Теперь, если кликнуть на элементе #level-3, событие начнёт всплывать. Когда оно дойдёт до level-2, вызов метода stopPropagation остановит дальнейшее всплытие события click. Таким образом событие click не возникнет на элементе level-1, и следовательно обработчик, который мы добавили вызван не будет.