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

Question

我意识到Firefox 对标签的点击事件<select>与Webkit/IE不同,我无法弄清楚为什么或如何解决这个差异.

具体而言,Webkit的/ IE将每个点击事件上<select> 作为组合两个点击"选择",和下拉的一个的点击<option>,在下面曲线图所示:

首先点击:

第二次点击:

在Webkit/IE中,只有在完成两次单击后才会触发click事件.

但是,在Firefox中,首次单击<select>标记被视为单击事件,第二次单击以选择<option>被视为另一个单击事件.因此,2个 点击事件已经在Firefox解雇比较一个 WebKit中/ IE进行同样的操作.

现在在代码示例中演示它,假设我们有:(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>

在Webkit/IE中,执行上图中所示的一组操作(第一次)将给出输出:

mouse down!

在Firefox中,它将给出:

mouse down!
mouse down again!

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

编辑:我尝试使用没有jQuery的纯JavaScript,结果保持不变.

编辑2:更多的上下文,我最初回答了这个问题:onclick选项标签不能用于IE和chrome,并赢得了我的答案的赏金.但是,正如后来的操作指出的那样,我的解决方案不适用于Firefox.我决定深入挖掘以解决这个问题,因此问了这个问题,我得到的回报是我从那个解决方案中得到的50个赏金.本质上,问题是创建一个选择菜单,无论何时进行选择都会触发事件,即使它是相同的.事实证明,由于不同的浏览器实现,这可能比预期更难.

编辑3:我完全清楚onchange,但这里的问题不在于onchange你是否仔细阅读.我需要让每个选择触发一个事件,即使它们是相同的选择(不会触发)onchange.

Answer 1

为什么不参与onchange活动？

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

这是小提琴

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

编辑:从哲学角度讲,select元素不适用于此类功能.change事件足以满足与select标签相关的大多数用例.您需要的功能,即知道用户是否对元素进行了选择(即使它没有更改),也不适合select标记的功能模型.逻辑上,select如果他/她不想更改选择,则没有人想要点击元素.

为了满足您的要求,您可以在选择标记之外给出一个Go, button并调用与onclick通常使用元素onchange事件相同的函数select.否则请给出一个hovercard/hover-menu 而不是select.

Answer 2

经过多次实验和搜索，我开始确信不同浏览器中的这种特定的不同行为很难解决（如果可能的话）。

然而，我意识到，我可以从另一方面解决问题，通过使用jQuery UI 选择菜单或Chosen创建选择菜单而不是使用<select>标签。这样，事件将在我测试的所有浏览器中一致的标签上click触发。<ul><li>