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

当鼠标进入选项时，它将首先点亮为“out”，然后再点击“in” 我发现FF23＆amp; IE9（FF崩溃）
它在Chrome 28＆amp;歌剧12.16
我有jquery 1.10.02

对于上述代码：http://jsfiddle.net/buicu/ZCmRP/1/
有关我的代码的更详细版本：http://jsfiddle.net/buicu/ZH6qm/4/

我知道我可以放一堆setTimeout / clearTimeout。但我想要更简单/更清洁的东西。

e.stopImmediatePropagation（）;没有帮助（至少在我的测试中。）。

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

是否有人对此错误进行了简单/清洁修复？

Answer 1

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

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

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

Answer 2

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

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

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

mouseleave（over select）bug的最佳解决方案是什么？

2 个答案: