检查光标是否在元素的父

Question

我有这个网站

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

我想添加一个鼠标悬停和鼠标移开事件parent元素，但问题是当光标悬停child elemet它触发mouseout事件虽然acually仍在parent元素内。 我该如何避免这种情况，只有在光标离开parent项目时才会触发mouseout事件。

$(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

你需要停止event对孩子的propagation：

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

Answer 3

使用的mouseenter /鼠标离开事件，而不是鼠标悬停/鼠标移开：

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

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

});