Javascript 两个元素上的Jquery mouseleave事件

我想在鼠标离开两个元素时触发一个事件。我找到了下面的JSFIDLE，这正是我想要的：

它使用以下代码：

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

但是，事件仍然会被触发，正如您可以通过div更改其背景颜色看到的那样

我希望只有当鼠标真正离开这两个元素时才会触发事件。

如何：

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

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

小超时是为了确保鼠标实际上离开了两个元素，而不是离开一个元素进入另一个元素。

怎么样：

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

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

---

小超时是为了确保鼠标实际上离开了两个元素，而不是离开一个元素进入另一个元素。

您不能阻止事件发生，但可以检查相关目标（您来自的元素）并检查它是一个还是另一个。如果是，只需从事件处理程序返回即可

比如：

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

---

演示：

您无法阻止事件发生，但您可以检查相关目标（您来自的元素）并检查它是一个还是另一个。如果是，只需从事件处理程序返回即可

比如：

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

---

演示：

使用

.setTimeout（）

---

使用

.setTimeout（）

拨弄