javascript - Why does Firefox react differently from Webkit and IE to "click" event on "select" tag?

Question

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.

Answer 1

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.