javascript - 开放(聚焦) "select"元素中非常奇怪的 Chrome 行为

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) 中运行 fiddle 时，我点击 <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”)。因此，它们会针对上下文中的每个可能元素运行(而不仅仅是那些可能可能被选中的元素)。

也许有某种奇怪的幽灵元素，“选定的”伪选择器在不应该执行的时候针对它执行。这里的解决方案是在执行伪选择器之前将上下文限制为选项。总是一件好事。