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

У меня есть div, который действует как раскрывающийся список. Таким образом, он появляется, когда вы нажимаете кнопку, и вы можете прокручивать этот большой список. Таким образом, div имеет вертикальную полосу прокрутки. Предполагается, что div будет исчезать, если вы нажмете вне div, т.е. На размытие.

Проблема в том, что когда пользователь нажимает на панель прокрутки div, IE ошибочно запускает событие onblur, а Firefox - нет. Я думаю, что Firefox по-прежнему рассматривает полосу прокрутки как часть div, и я считаю это правильным. Я просто хочу, чтобы IE вел себя одинаково.

Ответ 1

У меня есть аналогичная проблема с IE, запускающим событие blur, когда вы нажимаете на полосу прокрутки. По-видимому, это происходит только в IE7 и ниже, а IE8 - в режиме quirksmode.

Здесь что-то я нашел через Google

https://prototype.lighthouseapp.com/projects/8887/tickets/248-results-popup-from-ajaxautocompleter-disappear-when-user-clicks-on-scrollbars-in-ie6ie7

В основном вы только размываете, если знаете, что человек щелкнул где-то в документе, отличном от текущего сфокусированного div. Это позволяет обратное обнаружение щелчка полосы прокрутки, потому что document.onclick не загорается, когда вы нажимаете на полосу прокрутки.

Ответ 2

У меня была аналогичная проблема с полосой прокрутки в раскрывающемся списке автозаполнения. Поскольку выпадающий список должен быть скрыт, когда элемент формы, к которому он привязан, теряет фокус, проблема с правильным элементом стала проблемой. Когда была нажата кнопка прокрутки, только 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 вместо щелчка означало, что обработчик события будет выполнен до того, как событие blur будет запущено на входном элементе.

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

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

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

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

Ответ 3

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

Состояние зависания элемента popup работает так, как ожидалось, поэтому в вашем событии размытия вы можете проверить, не зависел ли ваш popup-элемент и удалить или скрыть его, если это не так:

$('#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/

Ответ 4

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

Я слушаю событие mousedown в меню и устанавливаю флаг на этом событии. Когда я поймаю событие размытия, если флаг mousedown включен, я вернул фокус. Поскольку Edge, FF и Chrome не будут запускать событие размытия, но будут запускать событие mouseup (какой IE не будет), я reset флаг mousedown для мыши для них (при размытии для 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;    
      } 
    },

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

Ответ 5

Использовать фокусную точку и focusin (события, специфичные для IE)

$(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();
});

Ответ 6

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

Ответ 7

Возможно, попробуйте добавить атрибут tabindex к -1 в div node.