两个元素的jquery mouseleave事件

Question

我想在鼠标离开两个元素时触发一个事件。我发现下面的jsfiddle这正是我在寻找：

http://jsfiddle.net/pFTfm/54/

它使用此代码：

var count = 0; 
$('#d1, #d2').mouseenter(function(){ 
    count++; 
    $('#d3').show(); 
}).mouseleave(function(){ 
    count--; 
    if (count == 0) { 
     $('#d3').hide(); 
     $('#d3').css('background-color', 'orange'); 
    } 
}); 
​ 

然而，该事件仍然被触发，你可以在看div改变它的背景颜色。

我希望事件只在鼠标真的离开这两个元素时被触发。

Answer 1

如何：

var count=0; 
$('#d1, #d2').mouseenter(function(){ 
    count++; 
    $('#d3').hide(); 
}).mouseleave(function(){ 
    count--; 

    setTimeout(function(){ 
     if (count==0){ 
       $('#d3').show(); 
      } 
    },50); 
}); 
​ 

jsFiddle

小超时，以确保鼠标真的离开这两个元素，而不是留下一个，进入另一个。

Answer 2

你不能阻止事件发生，但你可以检查相关的目标（你来自的元素），并检查它是否是其中一个。如果是，则从事件处理程序返回。

是这样的：

var checkRelated = function(e) { 
    var id = e.relatedTarget.id; 
    return id == 'd1' || id == 'd2'; 
} 

$('#d1, #d2').mouseenter(function(e){ 
    if (checkRelated(e)) return; 
    $('#d3').show(); 
}).mouseleave(function(e){ 
    if (checkRelated(e)) return; 
    // now we know we actually left both elements 
    $('#d3').hide(); 
}); 

演示：http://jsfiddle.net/pFTfm/57/

Answer 3

使用另一种变化.setTimeout()

var timer; 

$('#d1, #d2').hover(function(){ 
    if(timer) clearTimeout(timer); 
    $('#d3').show(); 
}, 
function(){ 
    timer = setTimeout(function() { 
     $('#d3').hide().css('background-color', 'orange'); 
    }, 100); 
}); 

小提琴here