jQuery/Javascript:Наведение курсора IE не распространяется на параметры поля выбора?

StackOverflow https://stackoverflow.com/questions/206997

  •  03-07-2019
  •  | 
  •  

Вопрос

У меня есть этот фрагмент скрипта для расширения текстового поля при наведении курсора мыши и сокращения его при выключении курсора мыши.

Проблема, с которой я сталкиваюсь, заключается в том, что 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, если кто-нибудь может порекомендовать действительно надежную.

Спасибо!

Это было полезно?

Решение

По-видимому, 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 используется не так - я никогда не использовал его раньше :))

Другие советы

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

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

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

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

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

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

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

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

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

});

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top