聚焦和模糊HTMLDivElement的事件？

Question

我使用HTML，CSS和JavaScript实现了自定义下拉菜单。 现在效果很好，但是我对现在进行“模糊处理”的方式不满意。 当您打开列表，然后单击其他位置时，它应该折叠。 我所做的是，在扩展列表之后，在window添加了事件侦听器（ mousedown ），并在折叠后删除了该侦听器。 该事件基本上使用target检查DOM事件是否发生在正确的元素上，如果不是，则模糊下拉控件。

我知道focus和blur 。 但是，它们似乎只适用于表单元素，我认为这是可以理解的。 它们还支持其他情况，例如“跳开”时。

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

Answer 1

也许您可以有一个虚拟输入，并在控件处于活动状态时集中精力。 然后观看模糊并关闭列表。 它将无法display:none但可能opacity:0 ，或者仅在视线之外。

Answer 2

我要做的是使用mouseout关闭我的自定义列表。 我围绕下拉菜单创建一个边界框。 该框具有附加的onmouseout事件，当鼠标移出该框时，该事件会关闭下拉菜单。 这样，您可以在列表之外添加一些填充，这将为用户提供更好的功能，而后只需将鼠标移出基本列表即可。

如果您想使用单击事件来执行此操作，那么我将拥有一个全局函数，就像您已经设置了该函数一样，并在页面上的所有单击事件上调用该函数。