Javascript 在选择元素上设置回调onBlur

我知道select HTML元素有一个

onChange

和

onFocus

事件监听器，但是当用户在没有选择选项的情况下单击select菜单时，有没有方法调用函数？

您可能可以使用“在外部单击”技术

您检测到用户在HTML元素外部单击，而不是查找

onBlur

事件。它应该足以实现您想要的逻辑

---

调用

onFocus

时，您可以设置一些标志，如

选择open

设置为

true

。然后，

onClickOutside

您检查的事件是为

true

设置的标志，并调用您想要的任何代码。

对您有帮助吗？

提示：尽管Firefox不支持onfocusout事件，但您可以通过使用onblur事件的捕获侦听器来确定元素的子元素是否失去焦点（使用addEventListener（）方法的可选useCapture参数）。

这是因为当您在打开的本机select元素（至少在MacBook Chrome上没有）外部单击时，浏览器不会发送单击或其他鼠标事件，除非有人知道如何解决这个问题，否则你会陷入困境。如果这对你来说是一项重要功能，我会自己制作下拉菜单，但不要忘记焦点管理和aria的内容。但对于初学者来说可能太难了。@shukar select在你单击外部时不会失去焦点，即使单击目标是可聚焦的，例如按钮。至少在MacBook C上是这样罗梅，对其他人不确定。我尝试过这种方法，但似乎不起作用。当我“第一次”在

select

外部单击，下拉菜单关闭，但不会触发

onClickOutside

事件。只有在第二次单击外部时，才会触发事件。我想知道这是否与打开

select

时有关，整个页面无法滚动，所以技术上我们是在内部单击

select

元素？与此页面类似，当您打开

select

时，当聚焦

select

时，页面不可滚动。