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

Question

我正在寻找一个DOM事件,我可以用JavaScript监听当一个已经打开的select元素(但没有更改选项)然后通过单击select元素,在页面上的某个地方(任何地方)关闭.

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

这不是change选择的事件,因为选择中的选项没有被更改.

我并不关心传统的Internet Explorer - 只需要符合标准的现代浏览器.专有黑客可能值得知道.

我已经创建了一个JSFiddle来演示这个问题:http://jsfiddle.net/premasagar/FpfnM/

1. 单击"结果"面板中的选择框
2. 单击标记为"HERE"(或其他任何地方)的文本,然后查看是否有任何事件添加到日志中.最新的Chrome或Firefox中没有活动.

所以问题是:可以添加什么JavaScript,以便在单击选择框时记录事件？

(我在这里问了一个类似但不同的问题:
iOS上的JavaScript:打开HTML select元素)

Answer 1

不幸的是,没有标准事件可以知道何时关闭或打开选择框,因此您的代码将非常多毛,适用于不同的浏览器.也就是说,我认为它可以完成,并且我已经在Firefox中使用该mouseup事件为您工作:

http://jsfiddle.net/FpfnM/50/

在Firefox中(我假设是Chrome),您需要非常仔细地跟踪该选择的状态.escape按下某个键或blur发生事件时,您需要更新状态以将其标识为已关闭.我没有在我的演示中实现它,你可以看到如果你点击转义而不是点击选择会发生什么.

在Safari中,事情变得更容易,其中mousedown选择上的事件表示打开选择,并且选择的任何关闭都由click事件表示.

如果您发现某个浏览器没有触发这些事件,您可以尝试另外一个技巧.因为像select和textarea这样的表单小部件通常由操作系统呈现而不是在浏览器内部,所以您可以与它们进行交互,并且某些消息可能无法访问浏览器的事件处理程序.如果您在选择框打开时将屏幕上的透明文本区域放置在较低的z-index处,则可以使用它来跟踪该关闭点击.它可能能够捕获浏览器DOM元素可能遗漏的事件.

更新: Chrome在打开时会在选择中看到mousedown,在选择打开时单击页面时会在文档上看到鼠标.这是适用于Chrome的版本:

http://jsfiddle.net/FpfnM/51/

同样,您需要进行一些浏览器检测以处理每个浏览器中的正确行为.特别是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

其他事件有很多边缘情况表示关闭(转义按键,模糊等),但这些是处理用户单击选择框然后单击进入文档区域的情况的最小值.

希望这可以帮助!