イベントのバブリングを止める

イベントのバブリングを止める (1)

一方、「親要素でイベントを監視しているが、子要素のイベントでそれを実行したくない」場合もあります。event.stopPropagation() を使うと、イベントのバブリングを止めることができます。

<div class="modal-overlay">
  <div class="modal-content">
    <p>モーダルの内容</p>
  </div>
</div>

イベントのバブリングを止める (2)

オーバーレイをクリックしたら閉じるが、モーダル内をクリックしても閉じないようにする例です。

動作の説明

• 「モーダルを表示」ボタンをクリックすると、モーダルが表示されます
• モーダルの外側（暗い部分）をクリックすると、モーダルが閉じます
• モーダルの内側（白い部分）をクリックしても、モーダルは閉じません
• これは、event.stopPropagation() によって、モーダル内のクリックイベントが親要素（オーバーレイ）に伝播しないためです