我正在寻找一个 DOM 事件，我可以用 JavaScript 来监听一个已经打开(但没有更改选项)的选择元素，然后通过在页面。
这不是选择的 blur 事件，因为选择保留了焦点。同样，它不是某些其他元素或文档的 focus 事件，也不是窗口、文档或主体上的 mousedown 或 click 事件。
这不是选择的 change 事件，因为选择中的任何选项都没有改变。
我不关心遗留的 Internet Explorer - 只是在符合标准的现代浏览器中工作的东西。不过，专有黑客可能值得了解。
我创建了一个 JSFiddle 来演示这个问题:http://jsfiddle.net/premasagar/FpfnM/
- 点击“结果”面板中的选择框
- 单击标记为“此处”(或其他任何位置)的文本，然后单击一下，查看是否有任何事件添加到日志中。最新的 Chrome 或 Firefox 中没有事件。
所以问题是:可以添加什么 JavaScript，以便在单击选择框时记录事件？
(我在这里问过一个类似但不同的问题:
JavaScript on iOS: opening an HTML select element )
最佳答案
不幸的是，没有标准事件可以知道选择框何时关闭或打开，因此您的代码将非常多毛以适应不同的浏览器。也就是说，我认为这是可以做到的，我已经在 Firefox 中使用 mouseup 为您提供了一些有用的东西。事件:
在 Firefox(我假设是 Chrome)中，您将需要非常仔细地跟踪该选择的状态。当 escape按下键或 blur事件发生时，您需要更新状态以将其标识为已关闭。我没有在我的演示中实现它，你可以看到如果你点击 escape 而不是点击关闭选择会发生什么。
在 Safari 中事情更容易，其中一个 mousedown选择上的事件表示打开选择，选择的任何关闭由 click 表示事件。
如果您发现浏览器没有触发这些事件，您可以尝试一个额外的技巧。因为像 select 和 textarea 这样的表单小部件通常由操作系统呈现，而不是在浏览器内部呈现，所以您可能会与它们进行交互，并且某些消息可能不会传递给浏览器的事件处理程序。如果您在选择框打开时将覆盖屏幕的透明文本区域放置在较低的 z-index 处，则您可以使用它来跟踪关闭点击。它可能能够捕获浏览器 DOM 元素可能错过的事件。
更新: Chrome 打开时在选择上看到鼠标按下，在打开选择的情况下单击页面时在文档上看到鼠标弹起。这是适用于 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
对于表示关闭的其他事件(转义按键、模糊等)，存在大量极端情况，但这些是处理用户单击选择框然后单击关闭的情况的最低限度文档区域。
希望这对您有所帮助!
关于javascript - 关闭 HTML 选择元素时是否会触发 DOM 事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6207929/