JS метод Event.stopPropagation()
Загальний опис
Метод stopPropagation використовується для зупинки подій від подальшого поширення на батьківські елементи в DOM. Це корисно, коли ви хочете контролювати, як обробляються події на різних рівнях ієрархії DOM.
Поширення подій відбувається в двох фазах: фаза захоплення і фаза сприйняття. Спочатку подія проходить через усі батьківські елементи (фаза захоплення), а потім досягає цільового елемента (фаза сприйняття). Якщо ви викликаєте stopPropagation у будь-якому обробнику події, подія не продовжить рухатися до інших обробників на батьківських елементах, але обробники на тому ж елементі все ще будуть виконані.
Наприклад, якщо у вас є кнопка всередині div, який також має обробник події, виклик stopPropagation в обробнику кнопки запобіжить виконанню обробника div. Це може бути особливо корисним у сценаріях, де ви не хочете, щоб взаємодія з елементом спричинила ефект на батьківському елементі.
Приклад використання:
document.getElementById('myButton').addEventListener('click', function(event) {
console.log('Button clicked');
event.stopPropagation();
});
document.getElementById('myDiv').addEventListener('click', function() {
console.log('Div clicked');
});
У цьому випадку, натискання на кнопку призведе до того, що повідомлення "Button clicked" буде виведено в консоль, але "Div clicked" не з'явиться.
| Порада: | Уникайте зупинки поширення подій, якщо у вас є обробники, які критично залежать від інформації про події з батьківських елементів. Це може ускладнити відладку, особливо в складних інтерфейсах користувача. |
| Порада: | Використовуйте |
| Порада: | У складних компонентах, таких як модальні вікна, зупинка поширення подій може бути корисною, щоб запобігти закриттю модального вікна, якщо користувач натискає на внутрішні елементи. |
Синтаксис
event.stopPropagation();Параметри
Return
undefinedПовертає
undefined, оскільки цей метод не має значення, яке можна отримати після виклику. Він зупиняє подальше поширення події в бульбашковій або поглинальній фазі, залежно від того, як подія була ініційована. Це означає, що подія більше не буде передаватися на батьківські елементи в дереві DOM, але інші обробники на тому ж елементі можуть продовжувати виконуватися.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
7 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
14.5.0 |
1.0 |
Приклади
У цьому прикладі, коли користувач натискає на кнопку "Натисни мене!", спочатку з'являється алерт з повідомленням "Кнопка натиснута!", але оскільки ми викликали stopPropagation, подія не доходить до батьківського елемента, і повідомлення "Батьківський елемент натиснуто!" не з'являється. Це дозволяє контролювати, які обробники подій активуються, і уникати небажаних ефектів при взаємодії з елементами.
Цей код демонструє, як зупинити закриття модального вікна, якщо натискають кнопку закриття. Таким чином, ви можете контролювати, що саме закриває модальне вікно.
const modal = document.getElementById('modal');
const closeButton = document.getElementById('closeButton');
closeButton.addEventListener('click', function(event) {
modal.style.display = 'none';
event.stopPropagation(); // Зупиняємо поширення події
});
modal.addEventListener('click', function() {
modal.style.display = 'none'; // Закриваємо модальне вікно при натисканні на фон
});У цьому прикладі, якщо форма не заповнена правильно, кнопка не відправляє форму, і подія не поширюється далі, що дозволяє уникнути потенційних помилок або небажаних поведінок.
const form = document.getElementById('myForm');
const submitButton = document.getElementById('submitButton');
submitButton.addEventListener('click', function(event) {
if (!form.checkValidity()) {
event.preventDefault(); // Зупиняємо стандартну поведінку кнопки
event.stopPropagation(); // Зупиняємо подію на батьківських елементах
alert('Форма не заповнена правильно.');
}
});