私は多くの入力タグを持っています、そして、各入力タグは、入力フィールドに値を挿入するためにリスト要素を選択できるulを持っています

Question

しかし、問題は、onclickイベントを閉じる入力タグぼかしでulを開き、それぞれdisplay noneとblockを使用してulをフォーカスで開きます。入力ぼかしで毎回ぼかしているので、ulのイベントリスナーは機能していません。ここにコードがあります。

var selectTime= document.querySelectorAll("input"); 
    for(var i=0; i<selectTime.length; i++) { 
       selectTime[i].onfocus = function(event) { 
        var el = event.currentTarget; 
       el.nextElementSibling.style.display = "block";//ul is show 
      } 
    } 
    for(var i=0; i<selectTime.length; i++) { 
       selectTime[i].onblur = function(event) { 
       var el = event.currentTarget; 
       el.nextElementSibling.style.display = "none";//ul is none 
       } 
    } 
    for(i=0;i<ulElements.length;i++){ 
    ulElements[i].onclick= function(event){ 
       if (event.target.tagName === 'LI'){ 
        console.log(event.target); 
       } 
     } 
    } 

しかし、ULのLiから選ばれた元素は、ここでは

コンソールに表示されていない click-eventとしてデモ https://jsfiddle.net/fzbx36zf/

Answer 1

がinput要素以外の場所に呼び出されている、onblurハンドラが故にonclickul要素に呼び出されます実行されていません。

setTimeout内側onblurハンドラーが手助けします！

var ulClicked = false; 
 
document.querySelector('input').onfocus = function() { 
 
    document.querySelector('ul').style.display = "block"; 
 
} 
 
document.querySelector('input').onblur = function(e) { 
 
    setTimeout(function() { 
 
    if (!ulClicked) { 
 
     document.querySelector('ul').style.display = "none"; 
 
    } else { 
 
     alert('UL clicked'); 
 
    } 
 
    ulClicked = false; 
 
    }, 100); 
 
} 
 
document.querySelector('ul').onclick = function(event) { 
 
    ulClicked = true; 
 
    document.querySelector('input').value = event.currentTarget.textContent.trim(); 
 
}

<input/> 
 
<ul style="display:none"> 
 
    <li>tiger</li> 
 
</ul>