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

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 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');
When the mouse enters the options it will fire first as 'out' and then as
'in' again. I found this prb in FF23 & IE9 (FF is crashing) It's working
as it should in Chrome 28 & Opera 12.16 I have jquery 1.10.02 For above
code: http://jsfiddle.net/buicu/ZCmRP/1/ For a more detailed version of my
code: http://jsfiddle.net/buicu/ZH6qm/4/
I know I could put a bunch of setTimeout/clearTimeout. But I want
something more simple/cleaner.
e.stopImmediatePropagation(); doesn't help (at least in my test.).
To bind a click to select (and to set false a variable) doesn't help
either. Because if the select drop down menu remains open and then the
mouse leaves the big menu, then the big menu will also remain open (I know
I could track when the mouse leaves the options and change back the
variable. But checking when the mouse leaves the option can't be done
consistently across browsers).
Does anyone has a simple/cleaner fix for this bug?