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

【JavaScript】DIVの外側をクリックしたときにDIVを非表示にする方法

DIVの外側をクリックしたときにDIVを非表示にする方法

Webアプリケーションを開発していると、モーダルウィンドウやドロップダウンメニューなど、「ユーザーが要素の外側をクリックしたら閉じる」という動作を実装したい場面がよくあります。JavaScriptを使えば、この機能はとてもシンプルに実現できます。

基本的な仕組み

ポイントは、document全体にクリックイベントを設定し、クリックされた要素（e.target）のIDが対象のDIVと一致しない場合に、そのDIVを非表示にすることです。

以下のコードを実行して、実際の動作を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <body>
      <script>
         window.onload = function(){
            var hideMe = document.getElementById('hideMe');
            document.onclick = function(e){
               if(e.target.id !== 'hideMe'){
                  hideMe.style.display = 'none';
               }
            };
         };
      </script>
      <div id="hideMe">このDIVの外側をクリックすると非表示になります。</div>
   </body>
</html>

コードの解説

  • window.onload：ページの読み込みが完了してから処理を実行します。これにより、DOM要素を確実に取得できるようになります。
  • document.onclick：ドキュメント全体のクリックイベントを監視し、ページ内のどこがクリックされても検知できるようにします。
  • e.target.id !== 'hideMe'：クリックされた要素のIDが「hideMe」以外の場合、つまりDIVの外側がクリックされた場合に条件が成立します。
  • style.display = 'none'：該当するDIVの表示をオフにして、画面から非表示にします。

実装時の注意点

このシンプルな実装では、DIV内の子要素をクリックした場合にも「外側のクリック」と判定されてしまう点に注意が必要です。DIVの中にボタンやテキストなどの子要素があり、それらのクリックは許可したい場合は、closest()メソッドを使って次のように判定すると安全です。

document.addEventListener('click', function(e){
   if (!e.target.closest('#hideMe')) {
      document.getElementById('hideMe').style.display = 'none';
   }
});

closest()は、クリックされた要素自身またはその祖先に指定のセレクターが存在するかどうかを判定できるため、子要素のクリックまでは正しく区別できます。モーダルやポップアップなど、実用的なUIを作る際にはこちらの方法をおすすめします。

  1. 【初心者向け】<script>タグでクライアント側のJavaScriptを定義する方法

    HTMLの<script>タグは、HTMLドキュメント内にスクリプトを宣言するために使用されます。このタグを使うことで、クライアント側（ブラウザ側）で動作するJavaScriptを定義できます。 <script>タグと</script>タグの間に記述したコードは、ブラウザによって解釈・実行されます。また、src属性を使えば、外部のJavaScriptファイルを読み込むことも可能です。 <script>タグの主な属性 属性値説明 asyncasyncスクリプトが非同期で実行されることを指定します。ページの読み込みをブロックせずにスクリプトを

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

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