不幸的是,没有知道选择框是何时关闭或打开的标准事件,因此您的代码将变得很笨拙,并且可以容纳不同的浏览器。就是说,我认为这是可以做到的,并且使用该mouseup事件,我已经在Firefox中为您工作了:
http://jsfiddle.net/FpfnM/50/
在Firefox(我假设使用的是Chrome)中,您需要非常仔细地跟踪选择状态。当escape按键或blur事件发生时,您需要更新状态以将其标识为已关闭。我尚未在演示中实现该功能,您可以看到如果单击逃逸而不是单击选择,会发生什么情况。
在Safari中,事情变得容易得多,其中mousedown选择项上的事件表示打开选择项,而选择项的任何关闭均由click事件表示。
如果找到没有触发这些事件的浏览器,则可以尝试另一种技巧。由于select和textarea之类的表单小部件通常是由OS而不是在浏览器内部呈现的,因此您有可能与它们进行交互,并且某些消息可能不会进入浏览器的事件处理程序。如果在选择框打开时将覆盖屏幕的透明文本区域放置在较低的z索引处,则可以使用它来跟踪关闭点击。它可能能够捕获浏览器DOM元素可能丢失的事件。
更新: Chrome在选择项打开时会在其上按下鼠标,在选择选择项处于打开状态时单击该页面时,在文档上会在鼠标上单击。这是适用于Chrome的版本:
http://jsfiddle.net/FpfnM/51/
同样,您需要进行一些浏览器检测以处理每个浏览器中的正确行为。尤其要注意的是,当您再次单击“选择”以将其关闭时,不会触发任何事件。但是,您可以检测到页面点击。
快速摘要:
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
对于其他事件,有很多边缘情况会表示关闭(退出键,模糊等),但这是处理用户单击选择框然后单击进入文档区域的最小情况。
希望这可以帮助!