为什么 Firefox 对“select”标签上的“click”事件的反应与 Webkit 和 IE 不同？

我意识到 Firefox 对待click事件于<select>标签与 Webkit/IE 不同，我不知道为什么或如何解决这种差异。

具体来说，Webkit/IE 考虑到每个click事件于<select>作为一个组合both点击“选择”，and单击下拉菜单之一<option>，如下图所示：

第一次点击：

第二次点击：

在 Webkit/IE 中，click仅在两次单击完成后才会触发事件。

然而，在 Firefox 中，第一次单击<select>标签被视为click事件，第二次点击选择<option>被视为另一个click事件。所以，two click与 Firefox 相比，事件已被触发one在Webkit/IE中进行相同的操作。

现在在代码示例中演示它，假设我们有：(JSfiddle 链接 http://jsfiddle.net/SBZD8/)

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

在 Webkit/IE 中，执行上图中所示的一组操作（第一次）将给出输出：

mouse down!

在 Firefox 中，它将给出：

mouse down!
mouse down again!

为什么会这样？我该如何解决？

编辑：我尝试使用纯 JavaScript 而不使用 jQuery，结果保持不变。

编辑2：更多背景信息，我最初回答了这个问题：onclick 选项标签不适用于 IE 和 chrome https://stackoverflow.com/questions/9972280/onclick-on-option-tag-not-working-on-ie-and-chrome/10058960#10058960并为我的回答赢得了赏金。然而，正如该操作员后来指出的那样，我的解决方案在 Firefox 上不起作用。我决定深入挖掘来解决这个问题，因此有人提出了这个问题，我奖励从该解决方案中获得的 50 赏金。本质上，问题是创建一个选择菜单，只要做出选择，即使选择相同，也会触发事件。事实证明，由于浏览器实现不同，这比预期的要困难（如果可能的话）。

编辑3：我完全清楚onchange，但这里的问题不是关于onchange如果你仔细阅读。我需要让每个选择触发一个事件even if它们是相同的选择（不会触发onchange.

为什么不与onchange event?

$("#sel").change(function(){
    $('body').append("<br/> Option changed");
});

这里是fiddle http://jsfiddle.net/juzerali/j2WwY/3/

但即使选择相同，它也不会触发。解决方法是使用另一个答案中建议的像 Chosen 这样的插件。

编辑：从哲学上讲select元素不适合此类功能。change事件足以满足大多数相关用例select标签。您想要的功能，即了解用户是否对元素进行了选择（即使它没有更改），不适合该元素的功能模型select标签。从逻辑上讲，没有人愿意点击select元素（如果他/她不想更改选择）。

为了满足您的要求，您可以给出Go button除了您选择的标签并调用相同的函数onclick你通常会用onchange的事件select元素。否则给一个悬停卡/悬停菜单代替select.