Почему элемент управления ASP.NET DropDownList требуется два щелчка для расширения в Internet Explorer

Question

У меня есть элемент управления ASP.NET DropDownList, который отображается в раскрывающемся списке (выберите тег HTML) на странице.По какой-то причине, когда я нахожусь в Internet Explorer, мне требуется два щелчка, чтобы открыть его и просмотреть параметры, что является дополнительным щелчком для конечного пользователя.Он отлично работает в Google Chrome, Mozilla Firefox и Safari - мне нужно только нажать один раз, чтобы увидеть варианты выбора.Почему бы это не работать правильно в IE?И что еще более важно, как я могу это исправить в IE?

Вот мой код:

Answer 1

Пришлось удалить жестко запрограммированное событие onfocus. IE обрабатывает первый щелчок для события фокуса, а второй - для раскрывающегося списка. Я предполагаю, что это известная причуда с IE вместе с остальными 400+ причудами.

Я все еще пытаюсь найти способ изменить стили выпадающего списка. В зависимости от того, какой код вы поместили в эту анонимную функцию обратного вызова, вам все равно может понадобиться дважды щелкнуть раскрывающийся список в IE. Я обнаружил, что вы можете использовать другие элементы управления внутри этой функции, и это не требует двух щелчков мышью. Я пока оставлю это как ответ. Я думаю, из-за Microsoft мы не можем использовать onfocus вообще при выпадающих списках. Я могу попытаться использовать фактический тег выбора, а не использовать Microsoft ASP.NET DropDownList, и посмотреть, смогу ли я использовать событие onfocus тогда, без дополнительного щелчка. Я сомневаюсь в этом.

jQuery (this.Elements.DDLClientName) .focus (function () { .. поставить код здесь });

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");
                     }
                 });
}