JavaScriptにおけるイベントバブリング停止の適用

1つの親要素の中にボタンといくつかのブロックがあるとします：

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

しかし、予期せぬ驚きが待っています：ボタンは親要素の内部にあるため、ボタンのクリックは同時に親要素のクリックも意味するのです。つまり、最初にブロックが表示された後、イベントのバブリングによって親要素のハンドラが動作し、ブロックが非表示になってしまいます。

ここでバブリングをキャンセルする機能が役に立ちます：ボタンのクリック時にバブリングをキャンセルし、親要素がこのクリックに反応しないようにすることができます。