Jquery同时事件关系

Question

当同时触发一个事件时，我不知道如何解除一个事件与另一个事件的绑定。我有这种 html 层次结构：

<div class="first"></div>
<div class="second"></div>

当鼠标输入 .first 时，会显示 .second。然后，如果鼠标离开 .first，.second 应该隐藏，除非鼠标正在进入 .second。 所以，我的问题是同时触发了 $('.first').mouseleave() & $('.second').mouseenter() 。我尝试了这样的事情，但没有结果：

$('.first').mouseenter(function(){
    $('.second').show();
});

$('.first').mouseleave(function(){
    $('.second').hide();
});

$('.second').mouseenter(function(){
     $('.first').unbind('mouseleave');
});

$('.second').mouseleave(function(){
     $('.first').bind('mouseleave');
     $('.second').hide();
});

有什么线索吗？

示例如下：http://jsfiddle.net/XdU7H/

Answer 1

超时！

var hideTimer;

$('.first').mouseenter(function(){
    $('.second').show();
});

$('.first').mouseleave(function(){
    hideTimer = setTimeout(function() {
       $('.second').hide();
    }, 500);
});

$('.second').mouseenter(function(){
     clearTimeout(hideTimer);
     $('.first').unbind('mouseleave');
});

$('.second').mouseleave(function(){
     $('.first').bind('mouseleave');
     $('.second').hide();
});

根据您的需要调整它，因为我不确定我是否正确地遵循了您的逻辑。 :P

http://javascript.info/tutorial/events-and-timing-depth