檢查光標是否在元素的父

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){ 

});