Прилагане на спиране на пренасянето на събития в JavaScript

Нека вътре в един родител имаме бутон и някакъв блок:

html<div id="parent">
  <button>click me</button>
  <div id="block">
    text
  </div>
</div>

Да получим референции към нашите елементи в променливи:

javascriptlet parent = document.querySelector('#parent');
let button = document.querySelector('button');
let block  = document.querySelector('#block');

Нека нашият блок първоначално е скрит:

css#block:not(.active) {
  display: none;
}

Нека направим така, че при клик върху бутона нашият блок да се покаже:

javascriptbutton.addEventListener('click', function() {
  block.classList.add('active');
});

А сега нека направим така, че при клик на кое да е място на родителя нашият блок да се скрие:

javascriptparent.addEventListener('click', function() {
  block.classList.remove('active');
});

Обаче ни очаква изненада: тъй като бутонът се намира вътре в родителя, то кликването върху бутона едновременно означава и кликване върху родителя. Това означава, че първо нашият блок ще се покаже, а след това поради пренасянето на събитието ще се задейства обработващата функция на родителя и нашият блок ще се скрие.

Ето тук ще ни бъде полезна възможността да отменим пренасянето: можем да направим така, че при кликване на бутона да отменим пренасянето, родителят да не реагира на този клик.