聚焦和模糊HTMLDivElement的事件？

Question

我使用HTML，CSS和JavaScript實現了自定義下拉菜單。 現在效果很好，但是我對現在進行“模糊處理”的方式不滿意。 當您打開列表，然后單擊其他位置時，它應該折疊。 我所做的是，在擴展列表之后，在window添加了事件偵聽器（ mousedown ），並在折疊后刪除了該偵聽器。 該事件基本上使用target檢查DOM事件是否發生在正確的元素上，如果不是，則模糊下拉控件。

我知道focus和blur 。 但是，它們似乎只適用於表單元素，我認為這是可以理解的。 它們還支持其他情況，例如“跳開”時。

無論如何，我問你現在是否有更好的方法來做我正在做的事情。 我所做的只是覺得愚蠢。

Answer 1

也許您可以有一個虛擬輸入，並在控件處於活動狀態時集中精力。 然后觀看模糊並關閉列表。 它將無法display:none但可能opacity:0 ，或者僅在視線之外。

Answer 2

我要做的是使用mouseout關閉我的自定義列表。 我圍繞下拉菜單創建一個邊界框。 該框具有附加的onmouseout事件，當鼠標移出該框時，該事件會關閉下拉菜單。 這樣，您可以在列表之外添加一些填充，這將為用戶提供更好的功能，而后只需將鼠標移出基本列表即可。

如果您想使用單擊事件來執行此操作，那么我將擁有一個全局函數，就像您已經設置了該函數一樣，並在頁面上的所有單擊事件上調用該函數。