Question

这是一个<select>元素：

<select>
    <option>Hello</option>
    <option>Banana</option>
    <option>Balloon</option>
    <option>Something</option>
    <option>Potato</option>
    <option>Cleveland</option>
</select>

这里有一点JavaScript（一个jQuery“就绪”处理程序）：

$(function() {

    function foo() {
        var s = $('select').find(':selected');
    }

    setInterval(foo, 200);
});

Here is the jsfiddle for this question.

处理程序设置一个间隔计时器，每隔200毫秒，它会找到<option>当前选中的<select>，并且不会对它做任何事情。当我在Chrome中运行小提琴（13.0.782.112），然后单击<select>元素，然后尝试选择一个条目时，选择突出显示会继续跳回到第一个选定元素。我可以点击所显示的任何<option>元素，当然，这些元素可以正常工作，然后下次再做同样的事情。

现在，如果我更改计时器处理程序，以便它不使用jQuery来查找当前选择的<option>元素，如下所示：

$(function() {

    function foo() {
        var select = $('select')[0];
        var s = $(select.options[select.selectedIndex]);
    }

    setInterval(foo, 200);
});

然后我不再看到效果。

Firefox不会这样做。我还没有尝试Safari。

我个人认为某事在这里做错了什么。是Chrome吗？ jQuery的？

编辑 - 还有一个细节 - 我在Linux上运行Chrome。我会在一秒钟内尝试Windows。（在Windows中编辑相同。）

Answer 1

将代码更改为：

function foo() {
    var s = $('select option:selected');
}

setInterval(foo, 200);

不确定为什么会这样做，但我的猜测是它与假选择器在jQuery中的工作方式有关。它们被实现为与选择器名称配对的函数（在本例中为“selected”）。因此，它们针对上下文中的每个可能元素运行（而不仅仅是那些可能可能被选中的元素）。

可能存在某种奇怪的鬼元素，当它不应该执行“选定的”伪选择时。这里的解决方案是在执行伪选择器之前将上下文限制为选项。总是一件好事。

在开放（聚焦）“选择”元素中非常奇怪的Chrome行为

1 个答案: