为什么ASP.NET下拉列表控件在Internet Explorer中需要点击两次才能展开

Question

我有一个ASP.NET DropDownList控件，它会在页面上呈现成一个下拉列表（select HTML标签）。但在Internet Explorer中，我需要点击两次才能打开并查看选项，这对于最终用户来说是多余的一次点击。在Google Chrome、Mozilla Firefox和Safari中它工作正常——我只需要点击一次就可以看到选择的选项。为什么它在IE中不能正确工作？更重要的是，我如何在IE中修复它？

以下是我的代码：

- MacGyver

Answer 1

必须移除硬编码的onfocus事件。IE处理聚焦事件的第一次点击，第二次点击才能展开下拉菜单。我猜这是IE的已知怪异行为之一，还有其他400多个怪异行为。

我仍在努力寻找一种方法来更改聚焦时下拉菜单的样式。根据你放入此回调匿名函数的代码，你可能仍需要在IE中点击两次下拉菜单。我发现你可以在此函数内部操纵其他控件，而不需要两次点击。目前我将其保留为答案。我想因为Microsoft的缘故，我们无法在下拉菜单上使用onfocus事件。我可能会尝试使用实际的select标记而不是使用Microsoft的ASP.NET DropDownList，看看是否可以在没有额外点击的情况下使用onfocus事件。但我觉得这是不可能的。

jQuery(this.Elements.DDLClientName).focus(function() { .. 在这里放置代码 });

- MacGyver

---

这是IE不好的持续原因。 - Flea

请看一下这个链接，说一下问题在哪里，我没有在下拉菜单中加入onfocus。http://screencast.com/t/o0aL2LSy8I - Mitesh Jain

Answer 2

我曾经遇到过同样的问题，这是由于IE 10处理onFocus的方式导致的，它将第一次焦点视为单击。我解决这个问题的方法是将mousedown事件绑定到click事件上。然后，在click事件中运行您需要的任何代码。

// if IE 10          
if (navigator.userAgent.indexOf("MSIE 10") > 0) 
{
   $("#InvoiceTypeDropDown").bind('mousedown',function(event) {
       $(this).trigger('click')
    });
}

所以我的完整代码看起来像这样：

if (navigator.userAgent.indexOf("MSIE 10") > 0)
{
                $("#InvoiceTypeDropDown").bind('mousedown',function(event) {
                $(this).trigger('click')
                });
                $("#InvoiceTypeDropDown").click(function () {
                     if ($(this).val() == '') {
                         $(this).css("color", "black");
                         $(this).css("font-style", "normal");
                     }
                 });
}

- Flea