Какое лучшее исправление для ошибки мыши (над выбором)?

Question

#childBox { 
    width:200px; 
    height:200px; 
    border:solid thin #900; 
} 


<div id="parentBox"> 
    <div id="childBox"> 
     <select> 
      <option>Opt1</option> 
      <option>Opt2</option> 
       <option>Opt3</option> 
      </select> 
    </div> 
    <div id="mesIn"></div> 
    <div id="mesOut"></div> 
</div> 


var i = 0, y=0; 
$('#parentBox').on({ 
    mouseenter:function(e){ 
     //console.log ('in: '); 
     i++; $('#mesIn').text('IN '+i); 
    }, 
    mouseleave: function(e){  
     //console.log ('out: '); 
     y++; $('#mesOut').text('OUT '+y); 
    } 
}, '#childBox'); 

Когда мышь вводит параметры, она сначала загорается как «выход», а затем снова «в».
Я нашел PRB в FF23 & IE9 (FF является сбой)
Это работает, как это должно быть в Chrome 28 & Opera 12,16
У меня есть JQuery 1.10.02

Для приведенного выше кода: http://jsfiddle.net/buicu/ZCmRP/1/
Для более детальная модификация моего кода: http://jsfiddle.net/buicu/ZH6qm/4/

Я знаю, что могу поставить кучу setTimeout/clearTimeout. Но я хочу что-то более простое/чистое.

e.stopImmediatePropagation(); не помогает (по крайней мере, в моем тесте.).

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

У кого-нибудь есть простые/чистые исправления для этой ошибки?

Answer 1

mouseleave: function(e){  
    //console.log ('out: '); 

    /* Solution */ 
    if(e.relatedTarget == null) return; 
    /************/ 

    y++; $('#mesOut').text('OUT '+y); 
} 

Answer 2

пост был создан давным-давно, но в Google эта тема актуальна, поэтому, вероятно, кому-то будет полезно.

в основном вы можете использовать эти решения:

jQuery('#parentBox').mouseleave(function(){}, function(e){ 
    if (e.target == this) { 
     console.log('leave'); 
    } 
    else { 
     console.log('false'); 
    } 
}); 

, но в моем случае я использую это:

jQuery('#parentBox').mouseleave(function(){}, function(e){ 
    if (jQuery('#parentBox').find(e.toElement)) { 
     console.log('leave'); 
    } 
    else { 
     console.log('false'); 
    } 
});