jQueryの：デリゲート

Question

とマウスオーバー/のMouseEnter私はこのコードを持っている：

<!-- language: lang-js --> 

$('#trajectory-sequence').delegate('li:not(.disabled)','mouseenter mouseleave', function(event) 
{ 
    if(event.type == 'mouseenter') 
     $(this).find("div:gt(0)").show(); 
    else if(event.type=='mouseleave') 
     $(this).find("div:gt(0)").hide(); 
}); 

/は、いくつかの子供たちを隠し示しています。さて、マウスがこれらの子供のうちの1人の上にいるときに私はアクションを実行したいと思います。私はこれを持っています：

<!-- language: lang-js --> 

$('#trajectory-sequence').delegate('li:not(.disabled) div:nth-child(4)','mouseover', 
function() { 
    alert('mouseover'); 
}); 

しかし、mouseoverイベントは決して引き起こされないようです。しかし、マウスオーバーの代わりにマウスを使用すると、完全に動作します。なぜですか？

Answer 1

mouseenterイベントは、イベントバブルを処理する方法がmouseoverと異なります。

mouseoverイベントの場合、マウスポインタがInner要素の上を移動すると、ハンドラがトリガされます。これは通常望ましくない動作です。一方、mouseenterイベントは、マウスが子孫ではなくバインドされている要素に入ったときにのみハンドラをトリガします。だからmouseenterが動作します。