jQuery body delegate 鼠标移入和移出同时触发的问题

Question

我在 body 上有一个委托，等待缩略图元素的类在鼠标悬停和鼠标移出时触发

 $('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元素的范围内时，在日志中会出现以下内容：

enlarged resetting enlarged resetting enlarged resetting enlarged resetting

其中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元素的范围内，则它会按照我的要求进行放大缩略图而不会重置它。

可能的问题是什么？

- Nik So

Answer 1

这是因为在设计上，mouseover 和 mouseout 会在进入/离开 .thumbnail 的后代元素时触发处理程序。

为了避免这种情况，请改用 mouseenter 和 mouseleave。这些事件不会冒泡，因此只会在进入/离开绑定它们的 .thumbnail 元素时触发。

- user113716