trying to understand click events on <select>

2019-06-20 07:58发布

问题:

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:

  • 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.

(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.)

回答1:

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...

HTML Standard