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

Метод stopPropagation() в JavaScript используется для предотвращения события от всплывания вверх по DOM дереву. Когда устанавливается значение true для свойства bubbles в методе Event.initEvent(), событие продолжит всплывание до корневого элемента документа. Иногда это может привести к тому, что несколько обработчиков событий будут вызваны для одного и того же события, что может привести к нежелательным результатам. Одним из решений для этой проблемы является использование метода stopPropagation().

Когда метод stopPropagation() вызывается для объекта события, это прекратит всплытие события, которое помещает его обработчики событий в вершине текущего DOM-дерева. Другими словами, событие больше не будет считаться всплывшим, и его обработчики событий не будут вызываться, если они добавлены к родительским элементам DOM-дерева.

Пример кода в использовании метода stopPropagation():

let parent = document.getElementById('parent');
let child = document.getElementById('child');
parent.addEventListener('click', function() {
console.log('Parent is clicked');
}, true);
child.addEventListener('click', function(e) {
console.log('Child is clicked');
e.stopPropagation();
}, false);

В данном примере создаются два элемента: `parent` и `child`. Событие клика привязывается к обоим элементам. Однако, обработчик событий элемента `child` вызовется только при клике на элемент `child`, т.к. мы применили метод stopPropagation() для этого элемента. Событие клика больше не будет всплывать до его родительского элемента.

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