下拉列表在不需要的時間關閉

我想用drop-down list創建search-input。當我關注或點擊除search-input以外的任何地方時，該列表必須關閉。下拉列表在不需要的時間關閉

我把listClose()加到"blur"-Listener。但現在我無法從下拉式元素中捕捉點擊事件。哪一個是我真正需要的事件監聽器？或者我需要另一種認識？

請運行下面的代碼片段。我試圖寫得最清楚。

document.addEventListener("DOMContentLoaded", function() { 
 
    var inputElement = document.getElementById("input_word-search"); 
 
    var listElement = document.getElementById("dd-menu_search-input"); 
 

 
    // Input will focused when document is ready. 
 
    inputElement.focus(); 
 

 
    listOpen = function() { 
 
    listElement.classList.add('dd-open'); 
 
    }; 
 

 
    listClose = function() { 
 
    listElement.classList.remove('dd-open'); 
 
    }; 
 

 
    inputElement.addEventListener("focus", function(e) { 
 
    listOpen(); 
 
    }); 
 

 
    inputElement.addEventListener("blur", function(e) { 
 
    listClose(); 
 
    }); 
 
})

.dd-menu { 
 
    padding: 8px 0; 
 
    background-color: #fff; 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2); 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
.dd-suggestion { 
 
    cursor: pointer; 
 
    text-align: left; 
 
    padding: 3px 20px; 
 
    line-height: 24px; 
 
} 
 

 
.dd-suggestion:hover { 
 
    color: #fff; 
 
    background-color: #697981; 
 
} 
 

 
.dd-open { 
 
    display: block; 
 
} 
 

 
.dd-empty { 
 
    display: none; 
 
} 
 

 
#dd-menu_search-input { 
 
    width: 74%; 
 
}

<body> 
 

 
    <div id="input-group"> 
 
    <input id="input_word-search" class="input_search suggest__field" type="search" autocomplete="off" name="q" placeholder="Seach"> 
 
    <div id="dd-menu_search-input" class="dd-menu dd-open"> 
 
     <div class="dd-dataset"> 
 
     <div class="dd-suggestion" onclick="alert('Click!')"> 
 
      suggestion-1 
 
     </div> 
 
     <div class="dd-suggestion" onclick="alert('Click!')"> 
 
      suggestion-2 
 
     </div> 
 
     <div class="dd-suggestion" onclick="alert('Click!')"> 
 
      suggestion-3 
 
     </div> 
 
     <div class="dd-suggestion" onclick="alert('Click!')"> 
 
      suggestion-4 
 
     </div> 
 
     <div class="dd-suggestion" onclick="alert('Click!')"> 
 
      suggestion-5 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body>

來源

2017-05-09 Palindromer

鼠標按下事件是否有任何'stopPropagation（）'在你的代碼或'返回FALSE' ？ –

@NikhilNanjappa沒有。問題與我提供的代碼一起玩。 – Palindromer

我問，因爲我爲什麼onmousedown會工作，但onclick不會。 –

我添加布爾變量，表示對drop-down list

var mousedownOnNodeCalee = false; 

    listElement.addEventListener("mousedown", function (e) { 
     mousedownOnNodeCalee = true; 
    }); 

    inputElement.addEventListener("blur", function (e) { 
     if(!mousedownOnNodeCalee) { 
      listClose(); 
      return; 
     } 
     inputElement.focus(); 
     mousedownOnNodeCalee = false; 
    });

來源

2017-05-09 11:17:18 Palindromer

的溶液（或可能我說的解決方法）是使用onmousedown代替onclick，所以它看起來就像這樣（請注意，我還準備卸下alert()和使用console.log()代替）

<body> 

    <div id="input-group"> 
    <input id="input_word-search" class="input_search suggest__field" type="search" autocomplete="off" name="q" placeholder="Seach"> 
    <div id="dd-menu_search-input" class="dd-menu dd-open"> 
     <div class="dd-dataset"> 
     <div class="dd-suggestion" onmousedown="console.log('Click!')"> 
      suggestion-1 
     </div> 
     <div class="dd-suggestion" onmousedown="console.log('Click!')"> 
      suggestion-2 
     </div> 
     <div class="dd-suggestion" onmousedown="console.log('Click!')"> 
      suggestion-3 
     </div> 
     <div class="dd-suggestion" onmousedown="console.log('Click!')"> 
      suggestion-4 
     </div> 
     <div class="dd-suggestion" onmousedown="console.log('Click!')"> 
      suggestion-5 
     </div> 
     </div> 
    </div> 
    </div> 

</body>

來源

2017-05-09 09:21:04

謝謝，它的工作！不幸的是，它唯一的解決方法。因爲dd菜單有填充。當我點擊這個填充時，dd-list將會關閉。 – Palindromer

請告訴我爲什麼'onmousedown'工作和'onmouseclick'不起作用？ – Palindromer

'onmousedown'事件在'blur'事件之前註冊，這就是它工作的原因。這裏的問題在於你的'blur'事件關閉了列表，因此該列表的所有'click'事件都不能被觸發，因爲列表被關閉。你不得不堅持'模糊'事件的方法嗎？ –

的原因是，當您事件的內容文本框，它叫blur功能列表立即disapear。所以你不能點擊列表。您可以通過setTimeout打印機視圖來listClose()這樣

listClose = function() { 
    setTimeout(()=>{ 
     listElement.classList.remove('dd-open'); 
    },100) 
};

來源

2017-05-09 09:43:45 Duannx

下拉列表在不需要的時間關閉

回答

相關問題