关闭HTML select元素时是否会触发DOM事件？

Question

我正在寻找一个DOM事件，该事件可以通过JavaScript进行监听，以了解通过打开选择元素（但未更改任何选项）然后通过关闭选择元素（在页面上其他位置）来关闭该元素。

这不是blur选择事件，因为选择保留了焦点。同样，这不是focus一些其他元素或文档或事件mousedown或click窗口，文档或身体。

这不是change选择事件，因为选择中的任何选项都没有更改。

我不关心旧版Internet Explorer，而只是在符合标准的现代浏览器中可以使用的东西。专有的黑客可能值得一提。

1. 在“结果”面板中单击选择框
2. 只需单击一下标记为“ HERE”（或其他位置）的文本，然后查看是否将任何事件添加到日志中。最新的Chrome或Firefox中没有任何事件。

因此，问题是： 可以添加哪种JavaScript，以在单击选择框时记录事件？

Answer 1

不幸的是，没有标准事件可知道选择框是何时关闭或打开，因此您的代码将变得很笨拙，并且可以容纳不同的浏览器。就是说，我认为这是可以做到的，并且使用该mouseup事件，我已经在Firefox中为您工作了：

在Firefox（我假设使用Chrome）中，您需要非常仔细地跟踪选择状态。当escape按键或blur事件发生时，您需要更新状态以将其标识为已关闭。我尚未在演示中实现该功能，您可以看到如果单击逃逸而不是单击选择，会发生什么情况。

在Safari中，事情变得容易得多，其中mousedown选择项上的事件表示打开选择项，而选择项的任何关闭均由click事件表示。

如果找到没有触发这些事件的浏览器，则可以尝试另一种技巧。由于select和textarea之类的表单小部件通常是由操作系统而不是在浏览器内部呈现的，因此您有可能与它们进行交互，并且某些消息可能无法传递到浏览器的事件处理程序中。如果在选择框打开时将覆盖屏幕的透明文本区域置于较低的z索引位置，则可以使用它来跟踪关闭点击。它可能能够捕获浏览器DOM元素可能丢失的事件。

更新： 打开选择框后，Chrome会在选择框上显示鼠标下移，在选择框打开后单击页面时，会在文档上显示鼠标上移。这是适用于Chrome的版本：

同样，您需要进行一些浏览器检测以处理每个浏览器中的正确行为。尤其要注意的是，当您再次单击“选择”以将其关闭时，不会触发任何事件。但是，您可以检测到页面点击。

快速摘要：

Chrome/Safari: select.mousedown on open, document.mouseup on close
Firefox: select.click on open, document.mouseup on close
IE8/IE7: select.click on open, document.mouseup on close

对于其他事件，有很多边缘情况会表示关闭（退出键，模糊等），但这是处理用户单击选择框然后单击进入文档区域的最小情况。

希望这可以帮助！