Why does Firefox react differently from Webkit and IE to "click" event on "select" tag?
firefox, html, internet-explorer, javascript, webkit
Solution
Why not work with `onchange` event?
$("#sel").change(function(){
$('body').append("<br/> Option changed");
});
Here is the fiddle
But it won't fire an even when selection is the same. Work around is to use a plugin like Chosen as suggested in another answer.
EDIT: Philosophically speaking `select` element is not meant for such functionality. `change` event suffices for most use cases related to `select` tags. The functionality that you desire, that is to know if a user has made a selection over the element (even if it hasn't change), doesn't fit the functional model of the `select` tag. Logically nobody would want to click on a `select` element if he/she doesn't want to change the selection.
To fit your requirement, you can give a Go `button` besides your select tag and call the same function `onclick` that you would normally do with the `onchange` event of `select` element. Otherwise give a hovercard/hover-menu instead of `select`.
Problem
I realized Firefox treats click event on `<select>` tag differently from Webkit/IE, and I couldn't figure out why or how to resolve this difference. Specifically, Webkit/IE regards each click event on `<select>` as a combination of both clicking on "select", and the clicking of one of the drop-down `<option>`, shown in graphs below: First Click: Second Click: In Webkit/IE, click event will be fired only after both clicks have been done. However, in Firefox, the first click on the `<select>` tag is regarded as a click event, the second click to select `<option>` is regarded as another click event. Therefore, two click events have been fired in Firefox comparing to one in Webkit/IE for the same operation. Now to demonstrate it in code example, assuming we have: (JSfiddle link) ``` <select id="sel"> <option>one</option> <option>two</option> <option>three</option> </select> <script> function select() { $("#sel").one("click", function(event) { console.log('mouse down!'); $("#sel").one('click', function() { console.log('mouse down again!'); $("#sel").off(); select(); }); }); } $(document).ready(function() { select(); }); </script> ``` In Webkit/IE, performing the set of operations shown above in the graph (for the first time) will give output: ``` mouse down! ``` In Firefox, it will give: ``` mouse down! mouse down again! ``` Why is it so and how do I fix it? Edit: I tried with pure JavaScript without jQuery, the result remains the same. Edit 2: A little more context, I originally answered this question: onclick on option tag not working on IE and chrome and won a bounty for my answer. However, as the op later pointed out, my solution did not work on Firefox. I decided to dig deeper to resolve this problem, and hence this question was asked and I am rewarding that 50 bounty I got from that solution. Essentially, the problem is to create a select menu that will trigger an event whenever a selection is made, even when it is the same. This has proven to be harder than expected, if possible at all due to different browser implementations. Edit 3: I am fully aware of `onchange`, but the question here is not about `onchange` if you read carefully. I need to have each selection trigger an event even if they are the same selection (which will not trigger `onchange`.