0

イベントが同時にトリガーされたときに、別のイベントからイベントのバインドを解除する方法がわかりません。私はこの種の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/

4

1 に答える 1

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

于 2013-04-11T16:47:38.133 に答える