JS stopPropagation: остановка распространения событий

stopPropagation() - это метод, который используется в JavaScript для предотвращения всплытия события.

Всплытие события происходит, когда событие срабатывает на элементе, а затем распространяется вверх по иерархии DOM (Document Object Model) до корневого элемента документа. Это означает, что если у вас есть вложенные элементы, включая родительский элемент, и событие происходит на вложенном элементе, оно будет всплывать по цепочке вверх до родительского элемента и даже выше.

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

Пример кода:

<div id="outer" onclick="console.log('Я внешний блок')">
  <div id="inner" onclick="event.stopPropagation(); console.log('Я внутренний блок')">
    <button id="btn" onclick="console.log('Я кнопка')">Нажми меня</button>
  </div>
</div>

В этом примере у нас есть внешний блок div с id "outer", внутренний блок div с id "inner" и кнопка внутри внутреннего блока. Каждый элемент имеет атрибут onclick, который определяет функцию, выполняемую при клике на элемент.

Если мы нажмем на кнопку, то в консоли будет выведено сообщение "Я кнопка", а затем "Я во внутреннем блоке" и "Я во внешнем блоке". Это произойдет потому, что событие будет всплывать по иерархии DOM от кнопки к внутреннему блоку, а затем к внешнему блоку.

Однако, если мы добавим метод stopPropagation() к обработчику события внутреннего блока, как в примере выше, то при нажатии на кнопку на экране будет выведено только сообщение "Я кнопка". stopPropagation() останавливает всплытие события на этапе внутреннего блока, и поэтому событие не достигает внешнего блока.

Таким образом, использование метода stopPropagation() позволяет вам контролировать распространение событий вверх по иерархии DOM и выбирать, какие элементы будут обрабатывать события, а какие нет. Это может быть полезно, когда вы хотите избежать нежелательных взаимодействий между элементами или при создании сложных приложений, в которых события должны обрабатываться только в определенных частях интерфейса.