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" не з'явиться.

правити

Порада

Уникайте зупинки поширення подій, якщо у вас є обробники, які критично залежать від інформації про події з батьківських елементів. Це може ускладнити відладку, особливо в складних інтерфейсах користувача.

автор: Bond правити

Порада

Використовуйте stopPropagation у комбінації з умовами. Наприклад, якщо вам потрібно зупинити подію тільки за певних умов, ви можете перевірити, чи натиснута конкретна кнопка, і тільки тоді зупинити поширення.

автор: Bond правити

Порада

У складних компонентах, таких як модальні вікна, зупинка поширення подій може бути корисною, щоб запобігти закриттю модального вікна, якщо користувач натискає на внутрішні елементи.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

event.stopPropagation();

Повернення

undefined

Повертає undefined, оскільки цей метод не має значення, яке можна отримати після виклику. Він зупиняє подальше поширення події в бульбашковій або поглинальній фазі, залежно від того, як подія була ініційована. Це означає, що подія більше не буде передаватися на батьківські елементи в дереві DOM, але інші обробники на тому ж елементі можуть продовжувати виконуватися.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	7	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	14.5.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<div id="modal">Демонстраційний елемент</div>
<button id="closeButton">Закрити</button>

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'; // Закриваємо модальне вікно при натисканні на фон
});

<form id="myForm">
    <label>Ім'я: <input type="text" name="name" value="Лесь"></label>
    <button type="submit">Надіслати</button>
</form>
<button id="submitButton">Надіслати</button>

const form = document.getElementById('myForm');
const submitButton = document.getElementById('submitButton');

submitButton.addEventListener('click', function(event) {
    if (!form.checkValidity()) {
        event.preventDefault(); // Зупиняємо стандартну поведінку кнопки
        event.stopPropagation(); // Зупиняємо подію на батьківських елементах
        alert('Форма не заповнена правильно.');
    }
});