非常奇怪的Chrome行为在开放（聚焦）的“选择”元件 [英] Very weird Chrome behavior in an open (focused) "select" element

问题描述

以下是< select> 元素：

 <选择> 
< option> Hello< / option> 
< option> Banana< / option> 
< option>气球< / option> 
< option> Something< / option> 
< option>马铃薯< / option> 
< option>克利夫兰< / option> 
< / select> 
  

以下是一些JavaScript（一个jQueryready处理程序）：

  $（function（）{
 
函数foo（）{
 var s = $（'select'） .find（'：selected'）; 
} 
 
 setInterval（foo，200）; 
}）; 
  

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

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



  $（function（）{
 
 function foo （）{
 var select = $（'select'）[0]; 
 var s = $（select.options [select.selectedIndex]）; 
} 
 
 setInterval（foo，200）; 
}）; 
  

然后我再也看不到效果了。

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

就我个人而言，我认为 在这里做错了什么。它是Chrome吗？ jQuery？

编辑—再详细一点 - 我在Linux上运行Chrome。我会在一秒钟内尝试Windows。 （ edit 在Windows中相同）。

解决方案

将代码更改为：

  function foo（）{
 var s = $（'select option：selected'）; 
} 
 
 setInterval（foo，200）; 
  

不知道为什么它会这样做，但我的猜测是它与假选择器的工作方式有关在jQuery中。它们被实现为与选择器的名称配对的功能（在这种情况下选择）。因此，它们会针对上下文中的每个可能元素（不仅仅是可能被选中的元素）运行。

也许会出现某种古怪的ghost元素，当它被选中的伪选择符不应该被执行时，它将被执行。这里的解决方案是我在做假选择器之前将上下文限制为选项。总是一件好事。

Here's a <select> element:

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

Here's a little bit of JavaScript (a jQuery "ready" handler):

$(function() {

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

    setInterval(foo, 200);
});

Here is the jsfiddle for this question..

The handler sets up an interval timer which, every 200 milliseconds, finds the currently-selected <option> of the <select>, and does nothing at all with it. When I run the fiddle in Chrome (13.0.782.112), and I click on the <select> element, and then try to select an entry, the selection highlight keeps jumping back to the first selected element. I can click on any of the <option> elements shown and that works, of course, and then it does the same thing the next time.

Now, if I change the timer handler so that it doesn't use jQuery to find the currently-selected <option> element, as follows:

$(function() {

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

    setInterval(foo, 200);
});

then I no longer see the effect.

Firefox does not do this. I haven't tried Safari yet.

Personally I think that something's doing something wrong here. Is it Chrome? jQuery?

edit — one more detail - I'm running Chrome on Linux. I'll try Windows in a sec. (edit same in Windows.)

解决方案

Change the code to:

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

setInterval(foo, 200);

Not sure why exactly it does this, but my guess would be that it's related to the way pseudoselectors work in jQuery. They're implemented as functions which are paired with the name of the selector (In this case "selected"). Consequently they are run against every possible element in the context (not just those which could potentially be selected).

Maybe there some sort of weird ghost element against which the "selected" pseudoselector is being executed when it shouldn't. The solution here is that I restrict the context to options before doing the pseudoselector. Always a good thing to do.

这篇关于非常奇怪的Chrome行为在开放（聚焦）的“选择”元件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！