javascript - HTMLDivElement 的焦点和模糊事件？

Question

我使用 HTML、CSS 和 JavaScript 实现了自定义下拉菜单。现在效果很好，但我对现在“模糊”的方式不满意。当您打开列表，然后单击其他位置时，它应该会折叠。我所做的是，在展开列表后将事件监听器(mousedown)添加到window，并在折叠后删除监听器。该事件主要使用 target 检查 DOM 事件是否发生在正确的元素上，如果没有，则模糊下拉控件。

我了解焦点和模糊。然而，它们似乎只适用于表单元素，我觉得这是可以理解的。它们还支持其他场景，例如“按 Tab 键”离开时。

无论如何，我想问你是否有更好的方法来做我现在正在做的事情。我觉得我所做的事情很愚蠢。

Answer 1

也许您可以有一个虚拟输入，并在控件处于事件状态时聚焦该输入。然后观察模糊并关闭列表。它不能是 display:none，但可能是 opacity:0，或者只是在 View 之外。