Question

我有这个HTML

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

我想向parent元素添加mouseover和mouseout事件，但问题是当光标悬停child elemet时它会触发mouseout事件，尽管它仍然在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

您需要停止孩子event的{{3}}：

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

Answer 3

使用mouseenter / mouseleave事件而不是mouseover / mouseout：

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

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

});

检查光标是否在元素的父元素内

3 个答案: