JavaScriptを使用して要素の外側のクリックを検出する方法

JavaScriptを使用して要素の外側のクリックを検出する方法を学ぶことは、多くの状況で使用できる強力なスキルです。メニューやモーダルウィンドウを非表示にします。数分で、その方法がわかります。

基本的なJavaScriptの外部要素の検出

HTMLでボックス要素を作成します：

<div class="box">
  If you click anywhere outside of me, I’m gone faster than you can snap your
  fingers.
</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クリック検出スクリプト：

// Select element with box class, assign to box variable
const box = document.querySelector(".box")
// Detect all clicks on the document
document.addEventListener("click", function(event) {
  // If user clicks inside the element, do nothing
  if (event.target.closest(".box")) return
  // If user clicks outside the element, hide it!
  box.classList.add("js-is-hidden")
})

これがすべてのコードを含むCodePenです。

JavaScriptコードの仕組み：

• 最初に、querySelector()を使用してbox要素を見つけます。 それをboxという変数に割り当てます
• 次に、addEventListener()を添付します ドキュメントにアクセスして、（ページ全体で）ドキュメントのクリックをリッスンするように指示します。
• ユーザーがドキュメントをクリックすると、function() コードブロック内で条件ステートメントを開始します{ .. } ：
• ユーザーがボックス要素内をクリックした場合（event.target.closest ）、その後は何もしません（return; 一部）。
• ただし、ボックス要素の外側をクリックした場合は、classList.addを使用して非表示にします。 .js-is-hiddenを追加するメソッド CSSクラス（display: noneを使用） プロパティ）以前に作成しました。

これで、要素の外側のクリックを検出する方法がわかりました！

まとめ

今後のチュートリアルでは、実際のプロジェクトで使用できる実用的なWebコンポーネントをまとめることで、クリック検出についてさらに詳しく説明します。クリック検出をポップアップモーダルウィンドウに統合することも、スライドイン、スライドアウトメニューに統合することもできますか？