Sprawdź, czy kursor znajduje się wewnątrz elementu rodzica

Question

Mam to html

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

Ja wanna dodać mouseover i mouseOut zdarzenia parent elementu, ale problem jest, gdy unoszą kursor child elemet pożary mouseOut imprezę mimo że acually nadal wewnątrz elementu parent. jak mogę tego uniknąć, aby zdarzenie mouseout było uruchamiane tylko wtedy, gdy kursor opuszcza obiekt parent.

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

Answer 1

użytkowania mouseenter i mouseleave zamiast z mouseover i mouseout, które rozwiążą twój problem.

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

Nie używaj stopPropagation() ponieważ The Dangers of Stopping Event Propagation.

Demo

Answer 2

Trzeba zatrzymać propagation z event na dziecko:

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

Answer 3

Stosować mouseenter/mouseLeave imprez zamiast mouseover/odsunięciu myszy:

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

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

});