Controllare se il cursore è madre di elemento all'interno

Question

ho questo html

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

Voglio aggiungere un passaggio del mouse e mouseOut eventi per parent elemento, ma, il problema è quando il passaggio del mouse il cursore child elemet spara evento mouseout anche se acually ancora all'interno dell'elemento parent. come posso evitare di fare in modo che l'evento mouseout si attivi solo quando il cursore lascia l'elemento parent.

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

Answer 1

Usa mouseenter e mouseleave invece di mouseover e mouseout che risolverà il tuo problema.

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

Non utilizzare stopPropagation() perché The Dangers of Stopping Event Propagation.

Demo

Answer 2

è necessario fermare la propagation del event sul bambino:

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

Answer 3

Utilizzare MouseEnter/eventi MouseLeave invece di mouseover/mouseout:

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

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

});