我意识到 Firefox 在 <select>
上处理 click 事件标记与 Webkit/IE 不同,我无法弄清楚为什么或如何解决这种差异。
具体来说,Webkit/IE 将每个click 事件视为<select>
上的事件作为两者点击“选择”、和点击下拉菜单之一的组合 <option>
, 如下图所示:
第一次点击:
第二次点击:
在 Webkit/IE 中,click 事件只有在两次点击都完成后才会被触发。
但是,在 Firefox 中,第一次点击 <select>
标签被视为一个点击事件,第二次点击选择<option>
被视为另一个点击事件。因此,对于相同的操作,Firefox 会触发两个 click 事件,而 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 on option tag not working on IE and chrome并为我的回答赢得了赏金。但是,正如运算符(operator)后来指出的那样,我的解决方案在 Firefox 上不起作用。我决定更深入地解决这个问题,因此提出了这个问题,我奖励我从该解决方案中获得的 50 赏金。本质上,问题是创建一个选择菜单,无论何时进行选择,即使是相同的选择,该菜单也会触发一个事件。事实证明,这比预期的要难,如果可能的话,由于不同的浏览器实现。
编辑 3:我完全了解 onchange
, 但这里的问题不是关于 onchange
如果你仔细阅读。我需要让每个选择都触发一个事件即使它们是相同的选择(这不会触发 onchange
。
最佳答案
为什么不使用 onchange
事件?
$("#sel").change(function(){
$('body').append("<br/> Option changed");
});
这是 fiddle
但即使选择相同,它也不会触发。解决方法是按照另一个答案中的建议使用像 Chosen 这样的插件。
编辑:从哲学上讲,select
元素并不适用于此类功能。 change
事件足以满足与 select
标签相关的大多数用例。您想要的功能,即了解用户是否对元素进行了选择(即使它没有改变),不适合 select
标签的功能模型。从逻辑上讲,如果他/她不想更改选择,则没有人愿意单击 select
元素。
为了满足您的要求,您可以在选择标签之外提供一个Go button
并调用您通常会执行的相同函数onclick
使用 select
元素的 onchange
事件。否则提供 hovercard/hover-menu 而不是 select
。
关于javascript - 为什么 Firefox 对 "click"标签上的 "select"事件的 react 不同于 Webkit 和 IE?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10119793/