> Как предотвратить всплытие события клика в JavaScript (JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Домклик, DigitalSail, Яндекс

Стек: JavaScript

> Пример ответа

Для предотвращения всплытия события клика в JavaScript используется метод stopPropagation() объекта события. Вызывайте его внутри обработчика:

JAVASCRIPT
element.addEventListener('click', function(event) {
  event.stopPropagation();
  // ваш код
});

Также можно применить stopImmediatePropagation(), если нужно остановить не только всплытие, но и выполнение других обработчиков на том же элементе:

JAVASCRIPT
element.addEventListener('click', function(event) {
  event.stopImmediatePropagation();
  // ваш код
});

В старых браузерах (IE8 и ниже) используется свойство cancelBubble:

JAVASCRIPT
element.onclick = function(event) {
  event = event || window.event;
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  }
};

На практике чаще всего достаточно stopPropagation(), особенно при работе с вложенными элементами, где нужно предотвратить срабатывание родительских обработчиков.