当 HTML 选择元素关闭时，是否会触发 DOM 事件? [英] Is there a DOM event that fires when an HTML select element is closed?

问题描述

我正在寻找一个 DOM 事件，当一个已经打开(但没有更改选项)的选择元素然后通过单击选择元素关闭时，我可以用 JavaScript 侦听该事件.页面.

它不是选择的 blur 事件，因为选择保持焦点.同样，它不是某个其他元素或文档的 focus 事件，也不是窗口、文档或正文上的 mousedown 或 click.

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

我不关心旧的 Internet Explorer - 只是在符合标准的现代浏览器中工作的东西.不过，专有黑客可能值得了解.

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

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

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

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

解决方案

不幸的是，没有标准的事件来了解选择框何时关闭或打开，因此您的代码将非常繁琐，并且要适应不同的浏览器.也就是说，我认为这是可以做到的，而且我已经在 Firefox 中使用 mouseup 事件为您做了一些工作:

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

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

Safari 中的事情更简单，选择上的 mousedown 事件表示打开选择，而选择的任何关闭都由 click 事件表示.>

如果您发现浏览器没有触发这些事件，您可以尝试一个额外的技巧.因为像 select 和 textarea 这样的表单小部件通常由操作系统呈现，而不是在浏览器内部呈现，所以您可能会与它们交互，并且某些消息可能不会进入浏览器的事件处理程序.如果您在选择框打开时将覆盖屏幕的透明文本区域定位在较低的 z-index 处，您或许可以使用它来跟踪关闭的点击.它可能能够捕获浏览器 DOM 元素可能错过的事件.

更新:Chrome 在打开时在选择上看到鼠标按下，在打开选择时单击页面时在文档上看到鼠标上移.这是一个适用于 Chrome 的版本:

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

同样，您需要进行一些浏览器检测以处理每个浏览器的正确行为.特别是 Chrome 的一个问题是，当您第二次单击选择以关闭它时，不会触发任何事件.但是，您可以检测到页面点击.

快速总结:

Chrome/Safari:打开时 select.mousedown，关闭时选择 document.mouseupFirefox:select.click 打开，document.mouseup 关闭IE8/IE7:select.click 打开，document.mouseup 关闭

对于表示关闭的其他事件(退出按键、模糊等)有很多边缘情况，但这些是处理用户单击选择框然后单击关闭的情况的最低限度文档区域.

希望这有帮助！

I'm looking for a DOM event that I can listen to with JavaScript for when a select element that has been opened (but no options changed) is then closed by clicking off the select element, somewhere (anywhere) else on the page.

It's not the blur event of the select, because the select retains focus. Likewise, it's not the focus event of some other element or the document, or a mousedown or click on the window, document or body.

It's not the change event of the select, since no option within the select has been changed.

I'm not concerned about legacy Internet Explorers - just something to work in standards compliant modern browsers. Proprietary hacks could be worth knowing though.

I've created a JSFiddle to demonstrate the problem: http://jsfiddle.net/premasagar/FpfnM/

1. Click on the selectbox in the "Result" panel
2. Click on the text marked "HERE" (or anywhere else) with a single click and see if any event is added to the log. There isn't an event in the latest Chrome or Firefox.

So the question is: What JavaScript could be added, to get an event logged when clicking off the selectbox?

(I've asked a similar, but different question here:
JavaScript on iOS: opening an HTML select element)

解决方案

Unfortunately there's no standard event for knowing when a select box is closed or open, so your code is going to be pretty hairy with accommodations for different browsers. That said, I think it can be done, and I've gotten something working for you in Firefox using the mouseup event:

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

In Firefox (and I'm assuming Chrome), you're going to need to track the state of that select pretty carefully. When an escape key is pressed or blur event occurs, you need to update the state to identify it as closed. I haven't implemented that in my demo, and you can see what happens if you hit escape instead of clicking off the select.

Things were easier in Safari, where a mousedown event on the select signifies opening the select, and any close of the select is signified by a click event.

If you find a browser where none of these events fire, you can try one additional trick. Because form widgets like select and textarea are often rendered by the OS and not inside the browser it's possible that you could interact with them and certain messages might not get down to the browser's event handler. If you were to position a transparent textarea covering the screen at a lower z-index when the select box is open, you might be able to use it to track that close click. It may be able to capture events that a browser DOM element may miss.

Update: Chrome sees a mousedown on the select when it opens and a mouseup on the document when the page is clicked with a select open. Here's a version that works with Chrome:

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

Again, you'll need to do some browser detection to handle the right behavior in each one. One catch with Chrome, in particular, is that no event is fired when you click on the select a second time to close it. You can detect the page click, however.

Quick Summary:

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

There are an awful lot of edge cases for other events that will signify a close (escape keypress, blur, etc.), but these are the minimum to handle the scenario where a user clicks the select box and then clicks off into the document area.

Hope this helps!

这篇关于当 HTML 选择元素关闭时，是否会触发 DOM 事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！