Проверьте курсор родителя внутри элемента

Question

У меня есть этот HTML

<div class='parent'> 
    <div class='child'></div> 
</div> 

Я хочу добавить наведении курсора мыши и MouseOut события parent элемента, но проблема в том, когда курсор при наведении child elemet это пожары MouseOut событие хотя он acually еще внутри parent элемент. как я могу избежать этого, чтобы событие mouseout срабатывало только тогда, когда курсор покидает parent.

$(body).on('mouseover', '.parent' , function(){ /* do somthing */}); 
$(body).on('mouseout', '.parent' , function(){ /* do another somthing */}); 

Answer 1

Использование mouseenter и mouseleave вместо от mouseover и mouseout, который решит вашу проблему.

$(document).on('mouseenter', '.parent' , function(){ 
    console.log("Mouse Enter"); 
}); 
$(document).on('mouseleave', '.parent' , function(){ 
     console.log("Mouse Leave"); 
}); 

Не используйте stopPropagation() потому The Dangers of Stopping Event Propagation.

Demo

Answer 2

Вы должны остановить propagation от event на ребенка:

$(body).on('mouseover', '.child' , function(e){ 
    e.stopPropagation(); 
}); 
$(body).on('mouseout', '.child' , function(e){ 
    e.stopPropagation(); 
}); 

Answer 3

Используйте MouseEnter/MouseLeave событий вместо наведения мыши/отведении указателя мыши:

$(body).on('mouseenter', '.child' , function(e){ 

}); 
$(body).on('mouseleave', '.child' , function(e){ 

});