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

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

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

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

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

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

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

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

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

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

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

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

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

Самостоятелно реализирайте коректна работа на описаната задача.