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');
});

그러나 우리는 예상치 못한 상황을 마주하게 됩니다: 버튼이 부모 요소 안에 있기 때문에 버튼을 클릭하는 것은 동시에 부모 요소를 클릭하는 것을 의미합니다. 이것은 먼저 우리 블록이 표시된 다음, 이벤트 버블링으로 인해 부모 요소의 핸들러가 실행되어 우리 블록이 다시 숨겨진다는 뜻입니다.

바로 이때 버블링을 취소할 수 있는 기능이 유용합니다: 버튼을 클릭할 때 버블링을 취소하여 부모가 이 클릭에 반응하지 않도록 만들 수 있습니다.

설명된 작업의 올바른 동작을 직접 구현해 보세요.