对于 mouseleave (over select) 错误，最好的解决方法是什么？答案

【问题标题】：What is the best fix, for mouseleave (over select) bug?对于 mouseleave (over select) 错误，最好的解决方法是什么？
【发布时间】：2013-08-10 01:23:51
【问题描述】：

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

当鼠标进入选项时，它会首先触发“out”，然后再次触发“in”。
我在 FF23 和 IE9 中找到了这个 prb（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();没有帮助（至少在我的测试中）。

绑定单击以选择（并将变量设置为 false）也无济于事。因为如果选择下拉菜单保持打开状态，然后鼠标离开大菜单，那么大菜单也将保持打开状态（我知道我可以跟踪鼠标何时离开选项并改回变量。但检查鼠标何时离开该选项不能在浏览器中一致地完成）。

有没有人对这个错误有一个简单/干净的修复？

【问题讨论】：

你试过e.stopPropagation();（而不是e.stopImmediatePropagation();）吗？
@asifrc 是的，没有成功。

标签： jquery firefox select internet-explorer-9 mouseleave

【解决方案1】：

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

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

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

【讨论】：

有效 - 但前提是整个选择框（所有选项）都在声明 mouseleave 的父元素内。
在 Chrome 中它工作正常，但我必须为 Firefox 做这个 hack，它工作，谢谢！

【解决方案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');
    }  
});

【讨论】：