Применение прекращения всплытия событий в 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');
});

Нас, однако, ждет неожиданный сюрприз: так как кнопка находится внутри родителя, то клик по кнопке одновременно означает и клик по родителю. Это значит, что сначала наш блок покажется, а затем из-за всплытия события сработает обработчик в родителе и наш блок скроется.

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

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