テキスト入力欄にフォーカスしたとき、隣にパネルを表示し、パネル内のボタンをクリックするか、パネルの外をクリックしたときパネルを閉じるような処理を作ろうと思っています。

基本的な開閉はうまく行ったのですがパネルの枠外をクリックしたときの処理を付け加えると一瞬表示されてすぐに閉じてしまいます。

正しく開閉させるにはどのようにすればいいのでしょうか？

以下はサンプルです。今のところ jQuery を使う予定はありません。よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Document</title>
6    <style>
7    .panel {
8        display: none;
9        border: 1px solid #000;
10        padding: 15px;
11        width: 320px;
12    }
13
14    .panel.active {
15        display: block;
16    }
17    </style>
18</head>
19<body>
20    <input id="example">
21    <div id="panel" class="panel">
22        <p>選択してください</p>
23        <button data-text="foo">foo</button>
24        <button data-text="bar">bar</button>
25    </div>
26
27    <script>
28    var input = document.getElementById('example');
29    var panel = document.getElementById('panel');
30
31    input.addEventListener('focus', function(){
32        panel.classList.add('active');
33    });
34
35    var buttons = panel.querySelectorAll('button');
36    for(var i = 0; i < buttons.length; i++){
37        buttons[i].addEventListener('click', function(){
38            input.value = this.getAttribute('data-text');
39            panel.classList.remove('active');
40        });
41    }
42
43    // パネルの外をクリックしたら閉じる
44    document.addEventListener("click", function(evt) {
45        var targetElement = evt.target;
46
47        do {
48            if (targetElement == panel) {
49                return;
50            }
51            targetElement = targetElement.parentNode;
52        } while (targetElement);
53
54        panel.classList.remove('active');
55    });
56
57    </script>
58</body>
59</html>

追記

パネル内に <p> 要素を追加

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

回答1件

ベストアンサー

javascript
1<style>
2.panel {
3border: 1px solid #000;
4padding: 15px;
5width: 320px;
6}
7.panel:not(.active) {
8display:none;
9}
10</style>
11<script>
12window.addEventListener('DOMContentLoaded', function(e){
13  var input = document.querySelector('#example');
14  var panel = document.querySelector('#panel');
15  input.addEventListener('focus', function(){
16    panel.classList.add('active');
17  });
18  document.addEventListener('click', function(e){
19    var t=e.target;
20    if(t.id!=="example" && t.id!=="panel"){
21      console.log(t.id);
22      panel.classList.remove('active');
23    }
24  });
25});
26</script>
27<input id="example">
28<div id="panel" class="panel" style="">
29<button data-text="foo">foo</button>
30<button data-text="bar">bar</button>
31</div>

パネル内の要素をクリックしても閉じない

IE対応版

javascript
1<style>
2.panel {
3border: 1px solid #000;
4padding: 15px;
5width: 320px;
6}
7.panel:not(.active) {
8display:none;
9}
10</style>
11<script>
12if(!HTMLElement.prototype.closest){
13  HTMLElement.prototype.closest=function(selector){
14    var self=this;
15    while(p=self.parentNode){
16      if([].map.call(p.querySelectorAll(selector),function(x){
17        return x;
18      }).filter(function(x){
19        return x===self;
20      }).length>=1) return self;
21      self=p;
22    }
23    return null;
24  }
25}
26window.addEventListener('DOMContentLoaded', function(e){
27  var input = document.querySelector('#example');
28  var panel = document.querySelector('#panel');
29  input.addEventListener('focus', function(){
30    panel.classList.add('active');
31  });
32  document.addEventListener('click', function(e){
33    var t=e.target;
34    if(t.id!=="example" && !t.closest("#panel")){
35      console.log(t.id);
36      panel.classList.remove('active');
37    }
38  });
39});
40</script>
41<input id="example">
42<div id="panel" class="panel" style="">
43<button data-text="foo">foo</button>
44<button data-text="bar">bar</button>
45<input type="text">
46</div>