Остановка распространения событий

Чтобы остановить дальнейшее распространение события в фазах захвата и пузырьков, вы вызываете метод Event.stopPropation() в обработчике события.

Event.stopPropagation();
Code language: CSS (css)

Обратите внимание, что метод event.stopPropagation() не останавливает поведение элемента по умолчанию, например, нажатие на ссылку, установку флажка. Если вы хотите остановить поведение по умолчанию, вы можете использовать метод Event.preventDefault().

Предположим, что у вас есть кнопка внутри <div>:

<div id="box"> <button class="btn">Register</button> </div>
Code language: HTML, XML (xml)

Когда вы нажимаете на кнопку, событие перетекает в элемент <div>. Следующий код показывает два окна оповещения при нажатии на кнопку:

const btn = document.querySelector('.btn'); const box = document.querySelector('#box'); btn.addEventListener('click', function (e) { alert('The button was clicked!'); }); box.addEventListener('click', function (e) { alert('The box was clicked!'); });
Code language: JavaScript (javascript)

Чтобы предотвратить распространение события щелчка на элемент <div>, вызовите метод stopPropagation() в обработчике событий кнопки:

btn.addEventListener('click', function (e) { alert('The button was clicked!'); e.stopPropagation(); });
Code language: JavaScript (javascript)

Теперь при нажатии на кнопку отображается только одно окно оповещения.

Оцените статью
devanswers.ru
Добавить комментарий