javascript - 为什么 Firefox 对 "click"标签上的 "select"事件的 react 与 Webkit 和 IE 不同?

原文 标签 javascript html internet-explorer firefox webkit

我意识到 Firefox 在 <select> 上处理点击事件标记与 Webkit/IE 不同,我无法弄清楚为什么或如何解决这种差异。

具体来说,Webkit/IE 会关注 <select> 上的每个点击事件。作为 的组合两者 点击“选择”,单击下拉菜单之一 <option> ,如下图所示:

第一次点击:

First click

第二次点击:

Second click

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

但是在火狐浏览器中,第一次点击<select>标签视为点击事件,第二次点击选择<option>被视为另一个点击事件。因此,两个 相比,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 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 element 不适用于此类功能。 change事件足以满足与 select 相关的大多数用例标签。您想要的功能,即了解用户是否对元素进行了选择(即使它没有改变),不符合 select 的功能模型。标签。从逻辑上讲,没有人会想要点击 select元素,如果他/她不想更改选择。

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

关于javascript - 为什么 Firefox 对 "click"标签上的 "select"事件的 react 与 Webkit 和 IE 不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10119793/

相关文章:

php - 在Underscore模板中格式化日期

html - IE 在图像上定位 anchor 元素

javascript - Bootstrap 3性能-屏幕卡住5-30秒

javascript - 进度栏行为取决于复选框 Bootstrap + jQuery

html - CSS下拉菜单在IE 6 7或8中不起作用

javascript - 使用搜索框创建CSS下拉菜单会从搜索图标中弹出…

javascript - 在 JS 中卡住了 Conway 的 "Game of Life"编程

javascript - 使用angularJS服务将`setInterval`转换为AngularJS

html - 如何解决这种股利相关的问题

javascript - 向上或向下排序列表项