JS метод Event.stopImmediatePropagation()

Загальний опис

stopImmediatePropagation — метод об'єкта Event, що використовується для припинення подальшої обробки події, включаючи інші обробники для тієї ж події на поточному елементі та на інших елементах DOM. Відмінність від stopPropagation у тому, що stopImmediatePropagation зупиняє не тільки розповсюдження події вгору по дереву DOM, а й виконання всіх інших обробників цієї події, призначених на поточному елементі. Цей метод особливо корисний, коли необхідно зупинити обробку події в конкретних випадках, унеможливлюючи виконання подальших обробників на поточному елементі.

Наприклад, у випадку, коли кілька обробників призначені на один і той же елемент, використання stopImmediatePropagation дозволяє зупинити виконання решти обробників після виклику першого:

document.getElementById('myButton').addEventListener('click', function(event) {
  console.log('Обробник 1');
  event.stopImmediatePropagation();
});

document.getElementById('myButton').addEventListener('click', function() {
  console.log('Обробник 2');
});

У цьому прикладі буде виведено тільки Обробник 1, оскільки stopImmediatePropagation припиняє виконання інших обробників події на цьому ж елементі. Це може бути корисно для попередження виконання певних дій за умов, коли подію вже оброблено іншою логікою.

Завдяки stopImmediatePropagation, можна забезпечити більший контроль над потоком обробки події та уникнути конфліктів між обробниками. Метод часто використовується у випадках, коли важливо контролювати порядок виконання обробників і зупиняти небажані дії. Застосування цього методу корисне також для складніших інтерфейсів, де необхідна точна координація між подіями.

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

event.stopImmediatePropagation();

Повернення

undefined

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

автор: Bond

правити

Переглядачі

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

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

Переглядач
	5	10	5	≤12.1	12	9

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

Переглядач
	4.4	18	10	5

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

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

Приклади

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

<button id="actionButton">Натисни</button>

const button = document.getElementById('actionButton');

// Перший обробник: лише для активної кнопки
button.addEventListener('click', function(event) {
  if (button.classList.contains('active')) {
    console.log('Ця кнопка вже активна.');
    event.stopImmediatePropagation();
  }
});

// Другий обробник: оновлює статус кнопки
button.addEventListener('click', function() {
  console.log('Активуємо кнопку.');
  button.classList.add('active');
});

<button id="specialButton">Натисни</button>

const specialButton = document.getElementById('specialButton');

// Спеціальний обробник для кнопки із заданим класом
specialButton.addEventListener('click', function(event) {
  if (specialButton.classList.contains('disable-click')) {
    console.log('Обробка завершена, інші обробники не виконуються.');
    event.stopImmediatePropagation();
  }
});

// Загальний обробник для всіх натискань
specialButton.addEventListener('click', function() {
  console.log('Це основний обробник, який виконується для всіх.');
});