24

我意识到 Firefox 处理标签上的点击事件<select>与 Webkit/IE 不同，我不知道为什么或如何解决这种差异。

具体来说，Webkit/IE 将每个点击事件<select> 视为点击“选择”和点击其中一个下拉菜单的组合，<option>如下图所示：

第一次点击：

第一次点击

第二次点击：

第二次点击

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

但是，在Firefox中，第一次点击<select>标签被视为点击事件，第二次点击选择<option>被视为另一个点击事件。因此，在 Firefox 中触发了两个 点击事件，而在 Webkit/IE 中触发了一个相同的操作。

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

<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并为我的回答赢得了赏金。但是，正如操作员后来指出的那样，我的解决方案不适用于 Firefox。我决定深入挖掘来解决这个问题，因此提出了这个问题，我奖励我从该解决方案中获得的 50 赏金。本质上，问题是创建一个选择菜单，只要做出选择，即使选择相同，它也会触发一个事件。由于不同的浏览器实现，如果可能的话，这已被证明比预期的要难。

编辑 3：我完全了解onchange，但这里的问题与onchange您是否仔细阅读无关。我需要让每个选择触发一个事件，即使它们是相同的选择（不会触发onchange.

4

3 回答 3

9

为什么不使用onchange事件？

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

这是小提琴

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

编辑：从哲学上讲，select元素并不意味着这种功能。对于与标签change相关的大多数用例，事件就足够了。select您想要的功能，即知道用户是否对元素进行了选择（即使它没有更改），不适合select标签的功能模型。select如果他/她不想更改选择，从逻辑上讲，没有人会想点击一个元素。

为了满足您的要求，您可以在选择标签之外给出一个Go 并调用通常对element事件执行的相同函数。否则给出一个悬停卡/悬停菜单 而不是.buttononclickonchangeselectselect

于 2012-04-18T12:12:02.590 回答
4

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

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

于 2012-04-15T07:28:39.943 回答
2

本质上，问题是创建一个选择菜单，只要做出选择，即使选择相同，它也会触发一个事件。

这在技术上确实（排序），但在 FF 中，它会在您单击打开和单击关闭时触发（您实际上可以一键完成，这在 Safari 和 Firefox 中会产生完全相同的效果）。但这是同一个事件。（点击触发触发$('#sel')）；

$("#sel").click(function(event) {
    if($(event.target).is('option')) {
        $(this).closest('select').click();
        return true;
    }
    console.log(event.target);
});

我说它“排序”的原因是，如果您从选项卡上选择下拉菜单并使用箭头键，它就无法处理。我认为，如果即使选择了事件相同的项目，您也需要触发事件，您需要以不同的方式进行处理。对于作为开发人员的我来说，如果这是我的项目，那么如果我在一个选择框上选择一个项目而不用触摸鼠标，这是不可接受的（这意味着如果用户来到我的网站并进行交互）使用没有鼠标的选择框，它不会做他甚至不知道它应该做的事情，可能会使整个事情不起作用，等等）。

我们可以在上班的时候玩一整天.click()，但这并不是真正的解决方案，即使我们实现了最初的目标。（哦，我永远无法在 Chrome 中触发任何东西）。

就像我在评论中所说的那样，我认为这与他们如何处理与选择的交互有关。几乎感觉好像 Safari 的选择实际上并没有出现在页面上……它排序创建了这个漂亮的元素，<option>当您单击它时，它的行为和看起来就像一个元素列表，但事实并非如此。可能是为什么当您第一次单击它时它也不会触发。当您单击它时，Webkit 不会将其视为“真实”元素，并且只会在您关闭它时触发单击选择，从未与“真实”选项进行过交互。

更改 HTML 可能是唯一的方法（就像 Chosen 一样）。具有讽刺意味的是，某些选择的元素（看起来像下拉菜单的元素）不能通过 tab 键选择……至少不能在他们的演示页面上选择（参见“标准选择”）。但这至少迫使我点击它，因此它会触发与鼠标相关的事件。

无论如何，我讨厌未解决的问题，但看起来没有真正的解决方案可以在所有浏览器.click()中工作<select>，我们应该开始关注替代解决方案。对不起 ：-（

于 2012-04-20T03:54:32.117 回答