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

小编典典

不幸的是，没有标准事件可知道选择框是何时关闭或打开，因此您的代码将变得很笨拙，并且可以容纳不同的浏览器。就是说，我认为这是可以做到的，并且使用该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

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

希望这可以帮助！

2020-05-01