jquery body委托鼠标悬停和mouseout同时触发

时间:2011-01-31 00:39:30

标签: jquery delegates

我在body上有一个委托,等待mouseover和mouseout上的类缩略图元素

 $('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.thumbnail元素的边界内移动鼠标时,我都会进入日志 放大 复位 放大 复位 放大 复位 放大 复位 ...

其中enlarge_thumbnail和reset_thumbnail是:

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'});
  }

如果我没有移动鼠标,并且鼠标在div.thumbnail元素的边界内静止不动,那么它就可以实现我的目的:放大缩略图而不是重置它。

可能是什么问题?

1 个答案:

答案 0 :(得分:5)

这是因为按照设计,mouseovermouseout会在您输入/离开.thumbnail的后代时触发处理程序。

要避免这种情况,请改用mouseentermouseleave。这些事件不会冒泡,因此只有在进入/离开它们所绑定的.thumbnail元素时才会触发。