jquery - What is the best fix, for mouseleave (over select) bug? -

#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 = 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'); 

when mouse enters options fire first 'out' , 'in' again.
found prb in ff23 & ie9 (ff crashing)
it's working should in chrome 28 & opera 12.16
have jquery 1.10.02

for above code: http://jsfiddle.net/buicu/zcmrp/1/
more detailed version of code: http://jsfiddle.net/buicu/zh6qm/4/

i know put bunch of settimeout/cleartimeout. want more simple/cleaner.

e.stopimmediatepropagation(); doesn't (at least in test.).

to bind click select (and set false variable) doesn't either. because if select drop down menu remains open , mouse leaves big menu, big menu remain open (i know track when mouse leaves options , change variable. checking when mouse leaves option can't done consistently across browsers).

does has simple/cleaner fix bug?

mouseleave: function(e){       //console.log ('out: ');    /* solution */   if(e.relatedtarget == null) return;   /************/    y++; $('#mesout').text('out '+y); }