jqueryのボディデリゲートマウスオーバーすると同時に

Question

で発射マウスアウト私はマウスオーバーでクラスサムネイル要素を待っている身体にデリゲートを持っていると

$('body').delegate('.thumbnail', 'mouseover mouseout', function(e){ 
      if(e.type=='mouseover' && !isMousingOver){ 
       enlarge_thumbnail(this); 
       isMousingOver = true; 
       console.log('enlarged') 
      }else if(e.type=='mouseout'){ 
       reset_thumbnail(this); 
       isMousingOver = false; 
       console.log('resetting') 
      } 
     }) 

をマウスアウトが、私はdiv要素のboundry内でマウスを上に移動するたびに。サムネイル要素、私は... が 拡大 が をリセットするリセット を拡大リセット 拡大 をリセット 拡大ログ で取得

私は、マウスを移動しないと、マウスがdiv.thumbnail要素のboundry内部静止している場合

function enlarge_thumbnail(element_to_set, how_much) { 
    element_to_set = $(element_to_set); // jQueryize the element; 
      how_much = parseInt(how_much);// Make sure it's an intger; 
    if(element_to_set.length && !isNaN(how_much)){ 
     element_to_set.css({width:how_much}); 
    } 
    } 

function reset_thumbnail(element_to_reset) { 
    element_to_reset = $(element_to_reset); // jQueryize the element; 
    element_to_reset.css({width:'200px'}); 
    } 

、それは私が欲しいものを行います：enlarge_thumbnailとreset_thumbnailがある

サムネイルを拡大し、それをリセットしない。

何が問題なのですか？

Answer 1

mouseoverとmouseoutは、子孫の入力/離脱時に.thumbnailのハンドラを起動するためです。

これを回避するには、代わりにmouseenterとmouseleaveを使用してください。これらのイベントはバブルではなく、バインドされている要素.thumbnailに出入りするときにのみ発生します。