JQuery在Internet Explorer中选择框焦点问题

Question

在下面的“.input”中与标签匹配。

代码在所有浏览器中都能正常工作，除了在Internet Explorer中，我需要两次单击选择框才能获得下拉列表。

$(".input").focus(function () {
var rc = $(this).parents(".rc-input");
rc.removeClass("rc-input-default");
rc.addClass("rc-input-active");
});

如果我使用mousedown而不是焦点它可以工作，但是在Tab键时我没有达到预期的效果？

<div class="rc-input">
   <select class="input">
   ...
   </select>
</div>

Answer 1

这是IE中的一个错误。当您对版本8之前的IE中的选择框进行任何更改（包括通过更改类名更改间接样式）时，它会重新创建基础Windows下拉窗口小部件，其副作用是将其重置为关闭状态。

在IE6-7上，作为解决方法，您可以使用onfocusin代替onfocus;因为这在选择聚焦之前发生，重新定位不会关闭控件。或者只使用简单的CSS :focus规则而不是改变类，并让IE6-7用户放弃输入突出显示。 （他们不配得上这些美女！）

请参阅this answer，了解结合这些方法的示例代码。

Answer 2

来自jQuery文档：

  

焦点事件不会在Internet Explorer中冒泡。因此，依赖于焦点事件的事件委派的脚本将无法在浏览器中一致地工作。

Answer 3

你可以同时处理mousedown和focus。