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.thumbnail, я попадаю в журнал увеличенный сброс увеличенный сброс увеличенный сброс увеличенный сброс ...

, где zoom_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, тогда она делает то, что мне нужно: увеличение эскиза, а НЕ его сброс.

В чем может быть проблема?

Answer 1

Это потому, что по замыслу mouseover и mouseout запускают обработчик, когда вы также вводите / оставляете потомков .thumbnail.

Чтобы избежать этого, используйте mouseenter и mouseleave. Эти события не всплывают, и как таковые будут срабатывать только при входе / выходе из элемента .thumbnail, с которым они связаны.