Остановка распространения событий: event.stopPropogation и event.stopImmediatePropagation()

Итак, эти методы используются для управления событиями в JavaScript. Сначала разберём каждый из них по отдельности:

event.stopPropagation()

Этот метод предотвращает дальнейшее распространение события в фазе захвата или всплытия. Это значит, что событие сработает только на event.target, то есть на самом элементе, но не на всех его родителях, как это сделано по умолчанию. Рассмотрим код:

javascript
1document.getElementById('child').addEventListener('click', event => {
2    event.stopPropagation();
3    console.log('Ребёнок');
4});
5
6document.getElementById('parent').addEventListener('click', () => {
7    console.log('Родитель');
8});
9

Так как мы используем event.stopPropogation(), в консоли мы увидим только Ребёнок. Без использования этого метода, мы увидим вывод: Ребёнок, Родитель

event.stopImmediatePropagation()

Этот метод не только предотвращает дальнейшее распространение события к родителям, но и останавливает выполнение других обработчиков событий на том же элементе. Рассмотрим пример:

javascript
1const element = document.getElementById('child')
2
3element.addEventListener('click', event => {
4    event.stopImmediatePropagation();
5    console.log('Первый обработчик нажатия');
6});
7
8element.addEventListener('click', () => {
9    console.log('Второй обработчик нажатия');
10});
11

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