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