onmouseout，mouseover经过子元素也触发的问题解决方案（兼容）

在mouseout与mouseover的冒泡问题上，相信有很多朋友都遇到过。今天这里就总结一下关于mouseover和mouseout冒泡问题的解决方案：

 

首先，看下event.relatedTarget的用法。

relatedTarget 事件属性返回与事件的目标节点相关的节点。

relatedTarget不支持IE。

对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。

对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。

对于其他类型的事件来说，这个属性没有用。

 

 

html代码：

<div id='but_temp'><a href='#'>这里是文字</a> 
    <div>第二方收复失地还 <br>sdfsjdlfsdjlfksdjlfksjdflk  
    <br> 
    <div>第三层第三层第三层第三层第三层第三层<br> 
    第三层第三层第三层第三层第三层第三层第三层</div> 
    <br> 
    </div> 
</div> 

js代码：

<script type="text/javascript" >  
    var d1 = document.getElementById('but_temp');  
    d1.onmouseover = mouseover_x ;  
    d1.onmouseout = mouseout_x ;  
function mouseover_x ( ae ){  
    var e = window.event || ae ;  
    var s = e.fromElement || e.relatedTarget ;  
    if( document.all ){  
        if(  !(s == this || this.contains(s))  ){  
            alert("IE: 你 in 了 ！");  
        }  
    }else{  
        var res= this.compareDocumentPosition(s) ;     
        if(  !(s == this || res == 20 || res == 0 )  ){  
            alert("FF: 你 in 了 ！");  
        }  
    }  
}  
 
function mouseout_x( ae ){  
        var e = window.event || ae;  
        var s = e.toElement || e.relatedTarget;     
        //var temp = document.getElementById('but_temp');     
        if(document.all){     
            if( !this.contains(s) ){     
                alert('IE: 你 out 了');     
            }     
        }else{     
            var res= this.compareDocumentPosition(s) ;       
            if( ! ( res == 20 || res == 0) ){        
                alert('FF: 你 out 了');     
            }       
        }    
}  
</script> 

转载于:https://www.cnblogs.com/rayy/archive/2011/02/23/4399745.html