Прекращение всплытия событий в JavaScript

Всплытие события можно остановить на любой элемент, через который всплывает событие. Для этого в коде элемента следует вызвать метод stopPropagation объекта Event.

В следующем примере клик по красному блоку сработает на нем самом, затем на голубом блоке и все - голубой блок прекращает дальнейшее всплытие и зеленый блок уже никак не отреагирует:

javascriptelem1.addEventListener('click', function() {
  console.log('зеленый');
});
elem2.addEventListener('click', function(event) {
  console.log('голубой');
  event.stopPropagation(); // остановим всплытие
});
elem3.addEventListener('click', function() {
  console.log('красный');
});

Можете проверить: