dropdownメニュー作成時、特定要素以外のmouse clickイベントを特定する方法

よくあるウェブページにdrop&downメニューを作りたいと思います。

<div id="test" style="curosr: pointer;"></div>

まず、test要素をクリックすると以下のdiv要素を追記したいです。

<div id="test">
  <div id="dropdown">
    <div style="curosr: pointer;">logout</div>
    <div style="curosr: pointer;">mypage</div>
  </div>
</div>

それからdropdown内の要素以外がクリックされたら
dropdownメニューを削除したいです。

メニューを追加するロジックはjavascriptで以下のように実装してみましたが、
追加されたdiv以外がクリックされた時のeventを特定する方法や
追加されたdivを削除する方法がわからなかったです。

document.addEventListener("DOMContentLoaded", function(){
    
    var test2= document.getElementById("test");
    if (test2){
      
      test2.innerHTML += '<div id="dropdown"><div style="curosr: pointer;">logout</div><div style="curosr: pointer;">mypage</div></div>';
  })        
    }else {
        window.alert("testは空です。");
    }
})

何かヒントになる情報がありましたら教えていただければ大変助かります。

x_x

2018/01/29 03:05

通常は再生成の面倒があるので非表示にするだけで削除しないと思うのですが、削除でいいのですか？

Kimsehwa

2018/01/29 09:42

そうですね、非表示でも問題ないです

行動規範の内容に同意します

回答2件

イベントはバブリングしますので、bodyなど上位の要素にclickイベントのハンドラをしかけて、「ドロップダウンの中でないか」判定して処理をすすめる、というような方法があります。

投稿2018/01/28 06:43

maisumakun

総合スコア145184

ベストアンサー

<div id="test" style="curosr: pointer;"></div> test要素をクリックする

空のdivはクリックできないのでは？
適当に文字列を入れるか高さを指定しているとして、こんなかんじで

javascript
1document.addEventListener('click', function(e){
2  var t=e.target;
3  var n=document.querySelector("#dropdown");
4  if(!n && t.id=="test"){
5    var n1=document.createElement("div");
6    n1.setAttribute("id","dropdown");
7    var n2=document.createElement("div");
8    n2.style.cursor="pointer";
9    n2.append(document.createTextNode("logout"));
10    n1.appendChild(n2);
11    var n3=document.createElement("div");
12    n3.style.cursor="pointer";
13    n3.append(document.createTextNode("mypage"));
14    n1.appendChild(n3);
15    t.appendChild(n1);
16  }else if(n && t.id!="test"){
17    n.parentNode.removeChild(n);
18  }
19});