尝试了解< select>上的点击事件分子 [英] trying to understand click events on <select> elements
问题描述
当在 select 元素上注册click事件处理程序时，我发现跨浏览器的行为非常不一致。我设置了 jsfiddle demo 。以下是我看到的内容：
When a click event handler is registered on a select element, I find very inconsistent behavior across browsers. I set up a jsfiddle demo. Here's what I see:
- OS X上的Firefox 12（10.7 Lion）：单击元素时会触发事件。下拉菜单暂时打开，不会保持打开状态。键盘操作不会生成单击操作。
- 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浏览器相同。
- Firefox 12 on OS X (10.7 Lion): Event fires when the element is clicked. The dropdown opens briefly, does not stay open. Keyboard actions don't generate click actions.
- Firefox 12 on Linux (Ubuntu Lucid): same
- Chome 19 on OS X: No mouse or keyboard interaction triggers the click event.
- Chrome 19 on Linux: First mouse click expands options, subsequent click on either the still-present select, or the options, triggers click event.
- Safari 5.1.6 on OS X: Similar to Chrome on Linux, first click expands options, subsequent click on options triggers click event (unlike Chrome, Safari hides the select element when showing options).
- Android Browser (on Ice Cream Sandwich): Initial click triggers event. Options stay visible after the event, and can be clicked. Clicking the options doesn't trigger another event.
- Chrome Beta for Android (Ice Cream Sandwich): Same as Android Browser.
如果有人可以告诉我或指出我的标准，我会很高兴，但我想这并不是很有用，因为我直接观察到没有人跟随它。我怀疑的是，这是一个不常见的尝试，也许更常见的是听取改变事件。真的吗？听点击选项怎么样？我无法让它工作，但它可能是一个愚蠢的错误。
I'd be happy if someone could tell me or point me to the standard, but I guess it's not that useful since I've observed directly that no one's following it. What I'm suspecting is that this is an uncommon thing to try to do, that maybe it's more common to listen for the change event instead. Is that true? What about listening to clicks on the options? I wasn't able to get that to work, but it could have been a stupid bug.
（为了提供更多的上下文，我正在替换一个选择元素建立在Google Closure的 goog.ui.Select 上，因为该组件很好地模仿了某些桌面选择渲染，特别是Chrome，但是可以不要在移动浏览器上看到扩展选项的全屏渲染。应用程序先前已经监听了该组件的 goog.ui.Component.EventType.ACTION 事件，在任何地方都没有明确的模拟，所以我只是想找到一致的替代品。）
(To give a little more context, I'm replacing a select element built on Google Closure's goog.ui.Select because that component nicely mimics some desktop select renderings, especially Chrome's, but can't do the full-screen rendering of expanded options you see on a mobile browser. And the application previously listened to that component's goog.ui.Component.EventType.ACTION event, which has no clear analog anywhere, so I'm just trying to find a consistent substitute.)
推荐答案
这是HTML生活标准，最后更新于2013年7月12日（2013年7月14日访问）。此链接将您带到SELECT元素。在其他方面，它表示任何HTMLElement都应该能够处理onclick事件并提供使用javascript添加侦听器的示例。当然，问题实际上是哪些浏览器可靠地支持指定的标准...
Here's the HTML Living Standard, last updated 12 July 2013 (accessed 14 July 2013). This link takes you right to the SELECT element. In other areas, it says that any HTMLElement is supposed to be able to handle an onclick event and gives examples of adding listeners using javascript. Of course, the question really is which browsers support the specified standards reliably...
这篇关于尝试了解< select>上的点击事件分子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
