Всплывание событий (и как его остановить с помощью event.stopPropagation)

Принцип всплытия событий из javascript.info гласит, что: Когда событие происходит с элементом, он сначала запускает обработчики для него, затем для его родителя, а затем полностью для других предков. Другими словами, если у вас есть элемент div, который меняет цвет с помощью события onmouseover, если вы прокрутите курсор над любыми дочерними элементами внутри этого элемента div, событие onmouseover все равно будет запущено.

Чтобы проиллюстрировать пример в коде, если вы нажмете самую внутреннюю ‹кнопку› в приведенном ниже фрагменте кода, все три функции (aThirdFunction, AnotherFunction и someFunction) будут запущены:

<div onclick={someFunction}>My div
  <p onclick={anotherFunction}> My p tag
    <button onclick={aThirdFunction}> My button
    </button/>
  </p> 
</div>

Так что это пузырьковое событие. Это довольно простая концепция, и это, безусловно, очень важный инструмент для знакомства с Javascript.

Однако бывают случаи, когда вы не хотите, чтобы возникало всплывающее окно событий, по крайней мере, в его работе по умолчанию. Есть много способов справиться с этим.

событие.stopPropagation()

Функция stopPropagation прекращает всплывать на элементе, где эта функция вызывается. Например, если в приведенном выше фрагменте кода я поместил event.stopPropagation() на дочернюю кнопку, событие будет считаться полностью обработанным и не будет всплывать к элементам ‹p› и ‹div›.

Один важный момент контекста, на который я хочу еще раз обратить внимание, заключается в том, что всплытие событий начинается с дочернего элемента и «всплывает» вверх. Таким образом, при вызове функции stopPropagation любые события, которые должны были выполняться *после* элемента с функцией stopPropagation, выполняться не будут. Событие дочернего элемента все равно будет запущено, но оно не перейдет к родительскому.

Еще одно замечание: всплывающие окна событий — это неплохо. На самом деле, вы почти всегда захотите, чтобы он выполнял поведение по умолчанию. Вы должны использовать event.stopPropagation() только тогда, когда вам это действительно нужно. В большинстве случаев вы можете оставить события всплывающими как есть или просто управлять ими, используя такие вещи, как настраиваемые события и event.target.