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

有没有人对此错误有一个简单/更清洁的修复？

4

2 回答 2

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

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

  y++; $('#mesOut').text('OUT '+y);
}
于 2013-10-25T16:49:30.237 回答
1

帖子是很久以前创建的，但在谷歌这个话题是真实的，所以可能对某人有用。

基本上你可以使用这个解决方案：

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');
    }  
});
于 2013-12-16T11:34:06.063 回答