为什么Firefox对Webkit和IE的反应与“点击”不同？事件在“选择”标签？ [英] Why does Firefox react differently from Webkit and IE to "click" event on "select" tag?

问题描述

我意识到Firefox在< select> 标记上的点击事件与Webkit / IE不同，我不知道为什么如何解决这个差异。 Webkit / IE将< select> 中的每个 click 事件视为 点击选择，和，然后点击< option> ，如下图所示：

第一次点击：

在Webkit / IE中， 但是，在Firefox中，首先点击点击 < select> 标签被视为一个点击事件，第二次点击选择< option> 作为另一个点击事件。因此，对于相同的操作，Firefox中的两个点击事件已经在Webkit / IE中与 one 进行比较。

现在在代码示例中演示它，假设我们有：（ JSfiddle链接 ）

 < select id =sel> 
< option> one< / option> 
< option> two< / option> 
< option>三< / option> 
< / select> 
< script> 
 function select（）{
 $（＃sel）。one（click，function（event）{
 console.log（'mouse down！'）; 
 $（＃sel）。one（'click'，function（）{
 console.log（'mouse down again！'）; 
 $（＃sel）。 ; 
 select（）; 
}）; 
}）; 
 
 $（document）.ready（function（）{
 select（）; 
}）; 
< / script>在Webkit / IE中，首先执行上图中所示的一组操作，会给出结果：
 鼠标向下！ 
  
在Firefox中，它会显示： 
 
 
 鼠标向下！ 
再次滑下！ 
  
为什么是这样以及如何修复它？ 
 
 
编辑：我尝试了纯jQuery没有jQuery，结果保持不变。
 
 
编辑2：多一点上下文，我原来回答了这个问题： onclick on选项标签不工作在IE浏览器上和铬并赢得了我的答案的赏金。然而，正如后来指出的，我的解决方案不适用于Firefox。为了解决这个问题，我决定深入挖掘，因此提出了这个问题，而且我从这个解决方案中获得了50个奖金。本质上，问题是创建一个选择菜单，无论何时进行选择，即使相同，也会触发事件。编辑3：我完全知道 onchange 
 
 / code>，但这里的问题不是关于 onchange ，如果你仔细阅读。我需要让每个选择触发一个事件即使它们是相同的选择（它不会触发 onchange 。
）$ b $为什么不能使用 onchange 事件？
  $（＃sel）。change（function（）{
 $（'body'）。append（< br /> ; 
}）; 
  
这里是小提琴 
 
 
 
但即使选择相同，也不会触发。一个像选择一样的插件，如另一个答案中的建议。
 
 
 
编辑：哲学上讲，选择元素并不意味着这样的功能。 change 事件足以满足大多数与标签相关的用例。用户已经对元素进行了选择（即使它没有改变），也不符合选择标签。从逻辑上讲，如果他/她不想改变选择的话，没有人愿意点击选择元素。 
 
 
为了满足您的要求，除了您的选择标签之外，还可以给 Go  按钮并调用相同的功能 onclick ，你通常会用 onchange 事件来处理 select 元素。否则，请输入 hovercard / hover-menu 而不是选择。
 
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. 
解决方案
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.

                        
这篇关于为什么Firefox对Webkit和IE的反应与“点击”不同？事件在“选择”标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！