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, можна забезпечити більший контроль над потоком обробки події та уникнути конфліктів між обробниками. Метод часто використовується у випадках, коли важливо контролювати порядок виконання обробників і зупиняти небажані дії. Застосування цього методу корисне також для складніших інтерфейсів, де необхідна точна координація між подіями.
| Порада: | Цей метод не зупиняє виконання обробників для інших типів подій на тому ж елементі; тому застосовуйте його вибірково для конкретних подій, що потребують зупинки. |
| Порада: | Пам'ятайте, що метод |
| Порада: | Якщо застосовувати |
Синтаксис
event.stopImmediatePropagation();Параметри
Return
undefinedПовертає
undefined, оскільки цей метод не має значення, яке можна отримати після виклику. Його основне призначення — припинити подальше поширення події. Він зупиняє не тільки подальшу пропагацію події в інших обробниках подій того ж елемента, а й зупиняє виконання інших обробників, які могли б бути зареєстровані на тому самому елементі.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
5 |
10 |
5 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
10 |
5 |
| Переглядач | ||
|---|---|---|
14.5.0 |
1.0 |
Приклади
У цьому прикладі, якщо ви натискаєте кнопку, яка вже має клас active, то буде відображено повідомлення про те, що обробка події зупинена, і виконання інших обробників не відбудеться. Це демонструє, як за допомогою stopImmediatePropagation можна контролювати виконання подій і уникати небажаних дій у складних сценаріях.
У цьому прикладі, якщо кнопка вже активна, то stopImmediatePropagation перешкоджає виклику другого обробника, і таким чином статус кнопки не змінюється повторно. Це дозволяє дотримуватися певної логіки без дублювання дій.
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');
});Цей приклад ілюструє, як stopImmediatePropagation дозволяє припинити виклики обробників для кнопки з конкретним класом. У результаті, якщо у кнопки є клас disable-click, буде виконано лише перший обробник, і ніяких інших дій не відбудеться, що корисно для керування умовними подіями.
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('Це основний обробник, який виконується для всіх.');
});