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

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

 

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

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

relatedTarget不支持IE。

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

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

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

1. <div id='but_temp'><a href='#'>这里是文字</a>  
2.     <div>第二方收复失地还 <br>sdfsjdlfsdjlfksdjlfksjdflk  
3.     <br>  
4.     <div>第三层第三层第三层第三层第三层第三层<br>  
5.     第三层第三层第三层第三层第三层第三层第三层</div>  
6.     <br>  
7.     </div>  
8. </div>  

1. <script type="text/javascript" >  
2.     var d1 = document.getElementById('but_temp');  
3.     d1.onmouseover = mouseover_x ;  
4.     d1.onmouseout = mouseout_x ;  
5. function mouseover_x ( ae ){  
6.     var e = window.event || ae ;  
7.     var s = e.fromElement || e.relatedTarget ;  
8.     if( document.all ){  
9.         if(  !(s == this || this.contains(s))  ){  
10.             alert("IE: 你 in 了 ！");  
11.         }  
12.     }else{  
13.         var res= this.compareDocumentPosition(s) ;     
14.         if(  !(s == this || res == 20 || res == 0 )  ){  
15.             alert("FF: 你 in 了 ！");  
16.         }  
17.     }  
18. }  
19.   
20. function mouseout_x( ae ){  
21.         var e = window.event || ae;  
22.         var s = e.toElement || e.relatedTarget;     
23.         //var temp = document.getElementById('but_temp');     
24.         if(document.all){     
25.             if( !this.contains(s) ){     
26.                 alert('IE: 你 out 了');     
27.             }     
28.         }else{     
29.             var res= this.compareDocumentPosition(s) ;       
30.             if( ! ( res == 20 || res == 0) ){        
31.                 alert('FF: 你 out 了');     
32.             }       
33.         }    
34. }  
35. </script>