试图理解 <select> 元素上的点击事件

Posted 2023-02-22

【中文标题】试图理解 <select> 元素上的点击事件

【英文标题】：trying to understand click events on <select> elements

【发布时间】：2012-05-31 13:18:03

【问题描述】：

当在select 元素上注册单击事件处理程序时，我发现跨浏览器的行为非常不一致。我设置了jsfiddle demo。这是我看到的：

OS X (10.7 Lion) 上的 Firefox 12：单击元素时触发事件。下拉菜单会短暂打开，不会保持打开状态。键盘操作不会产生点击操作。 Linux 上的 Firefox 12 (Ubuntu Lucid)：相同 OS X 上的 Chome 19：没有鼠标或键盘交互触发点击事件。 Linux 上的 Chrome 19：第一次鼠标单击会展开选项，随后单击仍然存在的选择或选项会触发单击事件。 OS X 上的 Safari 5.1.6：类似于 Linux 上的 Chrome，第一次点击展开选项，随后点击选项触发点击事件（与 Chrome 不同，Safari 在显示选项时隐藏选择元素）。 android 浏览器（在冰淇淋三明治上）：初始点击触发事件。选项在事件发生后保持可见，并且可以单击。单击选项不会触发另一个事件。 Android 版 Chrome Beta（冰淇淋三明治）：与 Android 浏览器相同。

如果有人能告诉我或指出标准，我会很高兴，但我想它没那么有用，因为我直接观察到没有人遵循它。我怀疑这是一件不常见的事情，也许更常见的是监听更改事件。真的吗？听听点击选项怎么样？我无法让它工作，但它可能是一个愚蠢的错误。

（为了提供更多背景信息，我将替换基于 Google Closure 的 goog.ui.Select 构建的选择元素，因为该组件很好地模仿了一些桌面 select 渲染，尤其是 Chrome 的渲染，但不能进行全屏渲染您在移动浏览器上看到的扩展选项。并且该应用程序之前侦听了该组件的 goog.ui.Component.EventType.ACTION 事件，该事件在任何地方都没有明确的模拟，所以我只是想找到一个一致的替代品。）

【问题讨论】：

唯一一致的就是使用 onchange 和 onblur。除此之外，这是一个废话拍摄。

Onchange 也不一致，在带有键盘导航的 IE 中，每次访问新选项时都会触发 onchange。其他浏览器仅在选择一个时才会触发它。它应该只在选择一个选项后触发并且控件失去焦点。是的，一团糟。

我不知道它是否有帮助，但 mousedown 事件在 10.8 山狮上的 firefox、chrome 和 safari 中的行为方式相同（仅在显示列表时触发事件）。在 quirksmode quirksmode.org/dom/events/tests/click.html

中有一个很好的测试页面

HTML5 规范旨在整理所有这些疯狂的跨浏览器行为，以便您检查一下。

【参考方案1】：

这是 HTML 生活标准，最后更新于 2013 年 7 月 12 日（2013 年 7 月 14 日访问）。此链接将您直接带到 SELECT 元素。在其他方面，它说任何 HTMLElement 都应该能够处理 onclick 事件，并给出了使用 javascript 添加侦听器的示例。当然，问题实际上是哪些浏览器可靠地支持指定的标准......

HTML Standard