关于两个元素的Jquery mouseleave事件

时间:2012-12-01 16:57:57

标签: javascript jquery mouseleave

我想在鼠标离开两个元素时触发事件。我找到了以下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更改其背景颜色看到的那样。

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

3 个答案:

答案 0 :(得分:7)

怎么样:

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

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

jsFiddle

小超时是为了确保鼠标实际上留下了两个元素,而不是留下一个元素并进入另一个元素。

答案 1 :(得分:5)

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

类似的东西:

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/

答案 2 :(得分:1)

使用.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