События родительского элемента распространяются на дочерние

#javascript #html #jquery

Вешаю обработчики событий mouseover и mouseout на родительский элемент.
Ожидаю, что mouseover сработает только при попадании мыши в область родительского
элемента, а mouseout - только при выходе из области родительского элемента.

Но, при перемещении по дочерним элементам, срабатывает обработчик mouseout, как будто
я покинул родительский элемент.

HTML:


  

    
      
    
    
...
    ...
  



JS:

$('.gallery').on('mouseover', '.photo', function() {
    console.log('mouseover');
});

$('.gallery').on('mouseout', '.photo', function() {
    console.log('mouseout');
});


Полный пример в fiddle.

Как сделать так, чтобы обработчики, повешенные на родительский элемент, не отрабатывали
при перемещении по дочерним элементам?
    

Ответы

Ответ 1

Событий не два, а четыре: mouseenter, mouseleave, mouseover, mouseout.
Ты выбрал не ту пару.

https://jsfiddle.net/dwjhr1s8/3/

$('.gallery').on('mouseenter', '.photo', function(){
    console.log('mouseenter');
}).on('mouseleave', '.photo', function(){
    console.log('mouseleave');
});


Ответ 2

В jQuery для этого есть специальная функция .hover(), которая является обработчиком
событий mouseenter и mouseleave:

$('.gallery .photo').hover(
    function(evt) {   
        alert('mouseenter');
    },
    function(evt) {
        alert('mouseleave');
    }
);


Полный пример в fiddle.