Нажатие на полосу прокрутки div запускает событие размытия в I. E

у меня была похожая проблема с полосой прокрутки в выпадающем списке автозаполнения. Поскольку выпадающий список должен быть скрыт, когда элемент формы, к которому он прикреплен, теряет фокус, сохранение фокуса на правильном элементе стало проблемой. Когда полоса прокрутки была нажата, только Firefox (10.0) продолжал фокусироваться на элементе ввода. IE (8.0), Opera (11.61), Chrome (17.0) и Safari (5.1) удалили фокус с ввода, в результате чего раскрывающийся список был скрыт, и поскольку он был скрыт, события щелчка не будут срабатывать в выпадающем списке.

к счастью, смещение фокуса можно легко предотвратить в большинстве проблемных браузеров. Это делается путем отмены действия браузера по умолчанию:

dropdown.onmousedown = function(event) {
    // Do stuff
    return false;
}

добавление возвращаемого значения в обработчик событий разобрало проблему во всех браузерах, кроме IE. Это отменяет действие браузера по умолчанию, в данном случае смещение фокуса. Кроме того, использование mousedown вместо click означало, что обработчик событий будет выполнен до запуска события blur на входной элемент.

это оставило IE как единственную оставшуюся проблему (неудивительно). Оказывается, нет способа отменить смещение фокуса на IE. К счастью, IE является единственным браузером, который запускает событие фокуса в раскрывающемся списке, то есть фокус на входном элементе может быть восстановлен с помощью обработчика событий IE-exclusive:

dropdown.onfocus = function() {
    input.focus();
}

это решение для IE не идеально, но, хотя смещение фокуса не отменяется, это лучшее, что вы можете сделать. Что происходит, так это размытие событие срабатывает на входе, скрывая раскрывающийся список, после чего фокус срабатывает на Теперь скрытом раскрывающемся списке, который восстанавливает фокус на входе и триггеры, показывающие раскрывающийся список. В моем коде он также запускает повторное заполнение раскрывающегося списка, что приводит к короткой задержке и потере выбора, но если пользователь хочет прокрутить выбор, вероятно, бесполезно в любом случае, поэтому я счел это приемлемым.

Я надеюсь, что это полезно, хотя мой пример немного отличается, чем на вопрос. От чего Я понял, что вопрос был о том, что IE запускает событие размытия в самом раскрывающемся списке, а не кнопку, которая его открыла, что для меня не имеет смысла... Как показывает мое использование обработчика событий фокуса, нажатие на полосу прокрутки должно переместить фокус на элемент, частью которого является полоса прокрутки в IE.

поздний ответ, но у меня была та же проблема и текущие ответы не работает для меня.

состояние наведения всплывающего элемента работает так, как ожидалось, поэтому в вашем событии размытия вы можете проверить, если ваш всплывающий элемент завис, и только удалить / скрыть его, если это не так:

$('#element-with-focus').blur(function()
{
    if ($('#popup:hover').length === 0)
    {
        $('#popup').hide()
    }
}

вам нужно будет переключить фокус обратно на исходный элемент, к которому привязано событие размытия. Это не мешает прокрутке:

$('#popup').focus(function(e)
{
    $('#element-with-focus').focus();
});

это не работает с IE7 или ниже - так что просто отбросьте поддержку для него...

пример:http://jsfiddle.net/y7AuF/

Это старый вопрос, но поскольку он все еще применяется к IE11, вот что я сделал.

Я слушаю событие mousedown в меню и устанавливаю флаг для этого события. Когда я ловлю событие размытия, если флаг mousedown включен, я устанавливаю фокус обратно. Поскольку Edge, FF и Chrome не запускают событие размытия, но запускают событие mouseup (которое IE не будет), я сбрасываю флаг mousedown на mouseup для них (на размытии для IE).

  mousedown: function (e) {
      this.mouseddown = true;
      this.$menu.one("mouseup", function(e){
        // IE won't fire this, but FF and Chrome will so we reset our flag for them here
        this.mouseddown = false;
      }.bind(this));
    }

 blur: function (e) {
      if (!this.mouseddown && this.shown) {
        this.hide();
        this.focused = false;        
      } else if (this.mouseddown) {
        // This is for IE that blurs the input when user clicks on scroll.
        // We set the focus back on the input and prevent the lookup to occur again
        this.skipShowHintOnFocus = true; // Flag used to avoid repopulating the menu
        this.$element.focus();
        this.mouseddown = false;    
      } 
    },

таким образом, меню остается видимым и пользователь ничего не теряет.

используйте focusout и focusin (т. е. определенные события)

$(document).bind('focusout', function(){
     preventHiding = false;
     //trigger blur event
     this.$element.trigger('blur');

});

$(document).bind('focusin', function(){
     preventHiding = true;
});

$(document).bind('blur', function(){
       // Did anyone want us to prevent hiding?
       if (this.preventHiding) {
         this.preventHiding = false;
         return;
       }
       this.hide();
});

У меня была та же проблема. Решено, поместив меню в обертку (больше) div. С пятном, нанесенным на обертку, это сработало!

возможно, попробуйте добавить значение -1 до div узел.