一尘不染

关闭HTML select元素时是否会触发DOM事件?

javascript

我正在寻找一个DOM事件,该事件可以通过JavaScript进行监听,以了解通过打开选择元素(但未更改任何选项)然后通过关闭选择元素(在页面上其他位置)来关闭该元素。

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

这不是change选择事件,因为选择中的任何选项都没有更改。

我不关心旧版Internet Explorer,而只是在符合标准的现代浏览器中可以使用的东西。专有的黑客可能值得一提。

  1. 在“结果”面板中单击选择框
  2. 只需单击一下标记为“ HERE”(或其他位置)的文本,然后查看是否将任何事件添加到日志中。最新的Chrome或Firefox中没有任何事件。

因此,问题是: 可以添加哪种JavaScript,以在单击选择框时记录事件?


阅读 279

收藏
2020-05-01

共1个答案

一尘不染

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