javascript-Chrome(开放式(重点突出)“选择”元素中的行为非常奇怪)

这是< 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中进行相同的编辑.)

解决方法:

将代码更改为：

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

setInterval(foo, 200);

不知道为什么要这么做,但是我猜想这与伪选择器在jQuery中的工作方式有关.它们被实现为与选择器名称配对的功能(在本例中为“ selected”).因此,它们针对上下文中的每个可能元素(而不仅仅是可能被选择的元素).

也许有某种奇怪的鬼元素,不应该对它执行“选择的”伪选择器.这里的解决方案是在执行伪选择器之前,我将上下文限制为选项.总是一件好事.

标签：sizzle,google-chrome,webkit,javascript,jquery
来源： https://codeday.me/bug/20191208/2088248.html