JQuery / Javascript: IE hover не охватывает варианты выбора поля?

Question

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

Проблема, с которой я сталкиваюсь, заключается в том, что Internet Explorer, похоже, не расширяет возможности наведения на опции поля выбора.

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

Пример кода:

<script type='text/javascript'>
$(function() {
$('#TheSelect').hover(
    function(e){
        $('#TheText').val('OVER');
        $(this).width( 600 );
    },
    function(e){
        $('#TheText').val('OUT');
        $(this).width( 50 );
   }
);
});
</script>

И

<input type='text' id='TheText' /><br /><br />

<select id='TheSelect' style='width:50px;'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    <option value='3'>Three</option>
    <option value='42,693,748,756'>Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... </option>
    <option value='5'>Five</option>
    <option value='6'>Six</option>
    <option value='7'>Seven...</option>
</select>

Есть ли обходные пути для блоков выбора в IE? Я бы даже подумал о замене jquery, если кто-нибудь может порекомендовать действительно надежный.

Спасибо!

Answer 1

Похоже, что это сообщение было давно, но, надеюсь, еще есть люди, заинтересованные в обходе. Я столкнулся с этой проблемой при создании нового сайта, над которым я работаю. На нем находится слайдер продукта, и для каждого продукта при наведении курсора на продукт появляется большой информационный пузырь с информацией о продукте, раскрывающийся список для выбора вариантов покупки и кнопка покупки. Я быстро обнаружил, что всякий раз, когда моя мышь покидает начальную видимую область меню выбора (т.е. пытается выбрать опцию), весь пузырь исчезает.

Ответ (спасибо, умные люди, которые разработали jQuery), был весь о пузырях событий. Я знал, что самый простой способ решить проблему - это временно «отключить» состояние выхода при наведении. К счастью, jQuery имеет встроенную функциональность, чтобы справиться с пузырями событий (они называют это распространением).

По сути, только с новой строкой кода или около того я прикрепил метод к событию "onmouseleave" раскрывающегося списка (при наведении курсора на один из параметров в списке выбора это событие вызывается надежно - я попытался несколько других событий, но это казалось довольно солидным), что отключало распространение событий (т. е. родительские элементы не могли слышать о событии «onmouseleave» из выпадающего списка).

Вот и все! Решение было намного более элегантным, чем я ожидал. Затем, когда мышь покидает пузырь, состояние выхода при наведении мыши нормально срабатывает, и сайт начинает свою работу. Вот исправление (я поместил его в документ. Уже):

$(document).ready(function(){
  $(".dropdownClassName select").mouseleave(function(event){
    event.stopPropagation();
  });
});

Answer 2

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

Пойдите с этим:

$(function() {
    var expand   = function(){ $(this).width(600) }
    var contract = function(){ if (!this.noHide) $(this).width(50) }
    var focus    = function(){ this.noHide = true }
    var blur     = function(){ this.noHide = false; contract.call(this) }
    $('#TheSelect')
        .hover(expand, contract)
        .focus(focus)
        .click(focus)
        .blur(blur)
        .change(blur)
});

(Извиняюсь, если это не так, как предполагается использовать jQuery - я никогда не использовал его раньше:))

Answer 3

У меня была форма, которая была скрыта / показана в зависимости от наведения. Если пользователь сфокусировался на выделенном, форма стала скрытой. Я смог решить мою проблему примерно так:

element.find('select').bind('mouseenter mouseleave',function(){
    //Prevent hover bubbling
    return false;
});

Answer 4

Ответ WorldWideWeb работал отлично.

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

Вот что я сделал:

$(".containerClass").hover(function() {
    $(this).children("img").hide();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });
}, function() {
    $(this).children('img').show();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });

});

Answer 5

Была такая же проблема, и ответ WorldWidewebb очень хорошо работал на IE8. Я только что сделал небольшое изменение, убрав «select» из селектора, так как я включил класс селектора в селектор. Сделано это действительно просто исправить.

Кроме того, я реализовал его в меню, которое использует плагин hoverIntent jquery, без проблем. (Без помех).