JavaScriptで要素の外側のクリックを検出する方法

JavaScriptで要素の外側のクリックを検出するテクニックは、メニューやモーダルウィンドウを非表示にしたいときなど、さまざまな場面で活用できる非常に便利なスキルです。この記事を読み終える頃には、その実装方法をマスターできているはずです。

基本の「要素の外側クリック」検出

まず、HTMLでボックス要素を作成します。

<div class="box">
  私の外側をどこかクリックすると、指を鳴らすより速く消えてしまうよ。
</div>

続いて、CSSでボックスの見た目を整えつつ、要素を非表示にするためのユーティリティクラスを作成します。

.box {
  margin: 1rem auto 1rem auto;
  max-width: 300px;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 1rem 1.5rem;
  font-size: 1.5rem;
}

.js-is-hidden {
  display: none;
}

そして、これがクリック検出を行うJavaScriptのコードです。

// boxクラスを持つ要素を選択し、変数boxに代入
const box = document.querySelector(".box")
// ドキュメント上のすべてのクリックを検知
document.addEventListener("click", function(event) {
  // 要素の内側がクリックされた場合は何もしない
  if (event.target.closest(".box")) return
  // 要素の外側がクリックされた場合は非表示にする!
  box.classList.add("js-is-hidden")
})

コード全体をまとめたデモは、以下のCodePenで確認できます。

JavaScriptコードの仕組み

• まず、querySelector()を使ってboxクラスの要素を取得し、boxという変数に代入します。
• 次に、addEventListener()をdocumentに設定し、ページ全体(document)でのクリックを監視します。
• ユーザーがページ上でクリックすると、関数内のコードブロック{ .. }にある条件分岐が実行されます。
• ボックス要素の内側がクリックされた場合(event.target.closest)は、何もしません(これがreturn;の役割です)。
• 一方、ボックス要素の外側がクリックされた場合は、classList.addメソッドで、あらかじめ作成しておいた.js-is-hiddenクラス(display: noneプロパティを持つ)を追加することで、要素を非表示にします。

これで、要素の外側のクリックを検出する方法はバッチリです!

まとめ

今後のチュートリアルでは、実際のプロジェクトでそのまま使える実用的なWebコンポーネントを組み立てながら、クリック検出についてさらに深く掘り下げていきます。ポップアップのモーダルウィンドウへの組み込みや、スライドイン・スライドアウト式のメニューなど、応用例も紹介する予定ですのでお楽しみに。