JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで複数のdivの内側・外側を判定するクリックイベントの条件分岐を実装する方法

Webページ上で、ユーザーが特定のdiv要素の内側をクリックしたのか、それとも外側をクリックしたのかを判定したいケースはよくあります。JavaScriptでは、document全体にクリックイベントリスナーを登録し、contains()メソッドを使うことで、クリックされた要素が対象のdiv内に含まれているかどうかを簡単に判別できます。

実装のポイント

  • document.addEventListener('click', ...)でページ全体のクリックを監視します。
  • querySelectorAll()で対象となる複数のdiv要素を取得します。
  • Array.prototype.find()とNode.contains()を組み合わせて、クリックされた要素（event.target）がどれかのdiv内にあるかを判定します。

サンプルコード

以下が実際のコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
   <div class="divDemo">
      第一の領域
   </div>
   <div class="divDemo">
      第二の領域
  </div>
</body>
<script>
   document.addEventListener('click', callEventFunction)
   function callEventFunction(event) {
      var div = document.querySelectorAll('.divDemo');
      var result = Array.apply(0, div).find((v) => v.contains(event.target));
      if (result) {
         console.log("divの内側がクリックされました");
      }
      else {
         console.log("divの外側がクリックされました");
      }
   }
</script>
</html>

プログラムの実行方法

上記のコードを「index.html」などのファイル名で保存し、Visual Studio Codeでファイルを右クリックして「Open with Live Server」を選択すると、ブラウザで実行できます。

動作確認

このプログラムでは、クリックした場所に応じてコンソールに異なるメッセージが出力されます。divの内側をクリックすれば「divの内側がクリックされました」と表示され、外側をクリックすれば「divの外側がクリックされました」と表示されます。

ケース1：divの内側をクリックした場合

div要素の部分を2回クリックしてみます。すると、クリックのたびにコンソールには次のように出力されます。

divの内側がクリックされました
divの内側がクリックされました

ケース2：divの外側をクリックした場合

続いて、div要素の外側を7回クリックしてみます。今度はすべてのクリックに対して、コンソールに次のように出力されます。

divの外側がクリックされました
divの外側がクリックされました
divの外側がクリックされました
divの外側がクリックされました
divの外側がクリックされました
divの外側がクリックされました
divの外側がクリックされました

コードの解説

この仕組みの核となっているのは、以下の1行です。

var result = Array.apply(0, div).find((v) => v.contains(event.target));

querySelectorAll()はNodeListを返すため、Array.apply(0, div)で通常の配列に変換しています。その後、find()メソッドで各divを順番にチェックし、v.contains(event.target)がtrueになる（＝クリックされた要素がそのdivの子孫である）最初の要素を探します。見つかればresultにそのdivが入り、if文で内側・外側の処理を振り分けられます。

この手法は、モーダルウィンドウの外側クリックで閉じる処理や、ドロップダウンメニューの外側クリックで閉じる処理など、実際のWeb開発でも非常に応用範囲が広いテクニックです。

  1. ボタンクリック時にJavaScriptでdivを非表示にする方法をわかりやすく解説

    Webページを作成していると、ボタンをクリックしたタイミングで特定の要素を表示・非表示に切り替えたい場面はよくあります。この記事では、JavaScriptのstyle.displayを使って、ボタンクリック時にdiv要素を非表示にする方法を具体的なコード例とともに解説します。基本となるdiv要素の準備まず、操作対象となる以下のようなdiv要素を用意します。<div id=showOrHide> Welcome in JavaScript </div>次に、クリックすると上記のdivが非表示になるボタンを配置します。onclick属性に関数名を指定するのがポイントです。&

  2. JavaScriptでボタンをクリックしたらテキストフィールドを空にする方法

    Web開発では、ボタンをクリックしたタイミングでテキストフィールド（テキストボックス）の中身を空にしたいケースがよくあります。たとえば、検索条件のリセットやフォーム入力内容の初期化などが代表例です。この記事では、JavaScriptを使ってこの処理をシンプルに実現する方法を解説します。 基本の考え方 実装に必要なのは、次の2つのステップだけです。 HTML側でonclick属性を使い、ボタンクリック時に呼び出すJavaScriptの関数を指定する 関数内でdocument.getElementById()によって対象の要素を取得し、そのvalueプロパティに空文字列（）を代入する docu