Ужыванне спынення ўсплывання падзей у 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');
});

Нас, аднак, чакае нечаканы сюрпрыз: так як кнопка знаходзіцца ўнутры бацькі, то клік па кнопцы адначасова азначае і клік па бацьку. Гэта значыць, што спачатку наш блок пакажацца, а затым з-за ўсплывання падзеі спрацуе апрацоўшчык у бацьку і наш блок схаваецца.

Вось тут-то нам і спатрэбіцца магчымасць адмяніць ўсплыванне: мы можам зрабіць так, каб пры кліку на кнопку адмяніць ўсплыванне, бацька не рэагаваў на гэты клік.

Самастойна рэалізуйце карэктную работу апісанай задачы.