テキスト入力欄にフォーカスしたとき、隣にパネルを表示し、パネル内のボタンをクリックするか、パネルの外をクリックしたときパネルを閉じるような処理を作ろうと思っています。
基本的な開閉はうまく行ったのですがパネルの枠外をクリックしたときの処理を付け加えると一瞬表示されてすぐに閉じてしまいます。
正しく開閉させるにはどのようにすればいいのでしょうか?
以下はサンプルです。今のところ 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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/26 06:57
2018/11/26 07:47 編集
2018/11/26 12:40