Спиране на възходящото разпространение на събития в JavaScript

Възходящото разпространение на събитие може да бъде спряно на всеки елемент, през който се разпространява събитието. За това в кода на елемента трябва да се извика методът stopPropagation на обекта Event.

В следващия пример щракването върху червения блок ще се задейства върху самия него, след това върху синия блок и това е всичко - синият блок спира по-нататъшното възходящо разпространение и зеленият блок вече няма да реагира по никакъв начин:

javascriptelem1.addEventListener('click', function() {
  console.log('зелен');
});
elem2.addEventListener('click', function(event) {
  console.log('син');
  event.stopPropagation(); // спираме възходящото разпространение
});
elem3.addEventListener('click', function() {
  console.log('червен');
});

Можете да проверите: