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

Question

Простой пример здесь: http://jsfiddle.net/ycHgg/1 Попробуйте это в IE 7, 8 или 9. Нажмите на поле выбора внутри выпадающего div и затем попробуйте выбрать число «3» - весь выпадающий div исчезнет.Как вы можете предотвратить это, и чтобы раскрывающийся список оставался открытым?Подробный пост ниже.

---

Во-первых, кажется, что это не проблема, я не могу поверить, что это даже проблема.Но это так, что я попытался поискать в Google.Не нашел ничего, что имеет непосредственное отношение, но это такая простая концепция, я не могу поверить, что ответа там нет.

Итак, вот ситуация.У меня есть div, и это мое выпадающее меню.У меня есть onmouseover и onmouseout, чтобы вызвать отображение и скрытие этого div.Я пробовал показ, видимость, и теперь я использую 'left', чтобы расположить его в -9999px, а затем обратно в -5px, чтобы скрыть и показать его.Все это прекрасно работает, поэтому не имеет значения, какой я выберу.Тем не менее, у меня также есть текстовое поле ввода внутри этого div.Я обнаружил, что, если я использовал display: none, чтобы скрыть div, наведя курсор на текстовое поле ввода, внезапно исчезло все div в Chrome.Использование 'left' или видимости больше не приводит к возникновению этой проблемы, поэтому я продолжал использовать 'left'

Теперь проблема заключается в следующем: у меня есть выбор в этом div.Когда я нажимаю на поле выбора, это нормально.Отлично.Когда я перемещаю указатель мыши в слой, который показывает элементы моего блока выбора, весь div исчезает вместе с select, текстовым полем и т. Д. Poof, просто внезапно прерывается, все исчезает.Я должен упомянуть, что эта проблема возникает в IE.Все версии от 7 до 9. Когда я попробовал поискать в Google для этого («выберите окно IE ошибка меню исчезает»), я просто получил результаты о совершенно другой проблеме, задокументированной здесь:

http://www.javascriptjunkie.com/?p=5

Это не моя проблема, хотя.Согласно этой странице, есть широко распространенная ошибка IE6, заставляющая поля выбора показывать через любые div, которые появлялись над ними, несмотря ни на что.Согласно другим источникам, это происходит потому, что блок выбора обрабатывается как оконный элемент и будет отображаться поверх всего, несмотря ни на что (но это исправлено в IE 7).И эта страница расскажет вам, как обойти это.Это нормально, но моя проблема в том, что поле выбора находится внутри самого div, и когда вы нажимаете на поле выбора, чтобы использовать его, а затем перемещаете указатель мыши вниз, чтобы выбрать элемент, оно исчезает - div, select, textbox ивсе.И это происходит в IE с 7 по 9. Опять же, единственный используемый javascript - это onmouseout и onmouseover, чтобы расположить div так, чтобы он находился слева: -9999px и затем слева: -5px соответственно, чтобы скрыть и показать его.Ничего необычного здесь, но это все еще происходит.

Структура довольно проста:

<a href="#" onmouseover="display('menu');" onmouseout="hide('menu');">Nav Item</a>
<div id="menu" onmouseover="display('menu');" onmouseout="hide('menu');">
  <form>
    <fieldset>
      <label>Hello</label>
      <select> ... </select>
    </fieldset>
  </form> 
  .... 
</div>

Эллипсы внутри выбора - это просто элементы выбора, эллипсы вне формы - этодругие элементы внутри выпадающего меню, состоящие из различных элементов div и ul и таблиц.Все плыли налево, я считаю.Я не думаю, что что-либо из этого влияет на эту проблему выбора окна, хотя.Якорь скрывает / показывает элемент div, а сам элемент div также имеет параметр hide / show (если пользователь перемещает мышь, начиная с элемента div, за пределы элемента div, он должен скрыться)

Возможно ли, что поле выбора все еще является оконным элементом и что-то мешает?Я читал, что это было исправлено в IE 7, но, может быть, только для случая, представленного в этом сообщении в блоге (div показан поверх выбора), а не если выбор находится внутри самого div?Но проблема в том, что использование поля выбора заставляет весь div исчезнуть, так что это звучит иначе.Тем не менее, выбранный элемент как оконный элемент заставляет меня думать, что, наведя на него курсор, div думает, что мышь теперь находится снаружи, поэтому она перемещается влево: -9999px вместо того, чтобы оставаться открытым и оставаться слева: -5px.Я попытался найти другие сайты, которые используют select внутри div выпадающего меню, и нашел только один пример, который меня очень удивил.Если вы перейдете к http://www.walmart.com и наведете курсор на «Store Finder», вы увидите, что появляется выпадающее меню div, и поле State является выбором.Там все работает нормально, но не могу понять, как они это делают.

Кто-нибудь на земле испытывал эту проблему?Может кто-нибудь воссоздать это сам и увидеть, что я не сумасшедший?Я очень серьезно ценю помощь, уже пару дней бью головой об стену.

Answer 1

хорошо ... кажется, что в IE есть проблема (как обычно) ... событие "over" в select не передает событие в родительский div ..

После прочтения кода на walmart.com .. я увидел, что они добавляют событие "щелчка" на элементе выбора, чтобы предотвратить исчезновение родителя.

Мне удалось скопировать этот код с помощью mootools, отметьте это http://jsfiddle.net/xA4fp/3/

HTML

<div id="wrapper">
<a href="#" >Nav</a>
<div id="menu" >
    <form>
        <fieldset>
            <label>hello</label>
            <select id="optionslist">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </fieldset>
    </form>
    </div></div>

JS

addBoxEvents();
var activeForm = false;

$("optionslist").addEvent('click',function(E){
    activeForm = true;
});

$("optionslist").addEvent('blur',function(E){
    activeForm = false;
});

function addBoxEvents(){
  $('wrapper').addEvent('mouseout',function(E){
     if(!activeForm){
         $('menu').setStyle('visibility','hidden');
    }
  });

  $('wrapper').addEvent('mouseover',function(E){
     $('menu').setStyle('visibility','visible');
  });
}

даже если вы не знаете mootools, код легко понять, поэтому вы поймете основную идею ... в основном я использую переменную состояния с именем "activeForm" в событии mouseout и меняю эту переменную, когда пользователь нажимает на выбор или когда выбор теряет фокус ...

Возможно, он не работает идеально, но это только начало ... Я проверил его на IE9

Удачи!

Answer 2

Звучит так, будто наведение мыши на элемент select вызывает событие onmouseout для div и, следовательно, позиционирует его влево: -9999px.Вы пытались добавить событие onmouseover к элементу select, который правильно позиционирует div (т. Е. Left: -5px)?