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

在這里擺弄