问题:

       我们在使用onmouseout事件的时候,经常会出现诡异现象,达不到自己预期的效果!

        比如以下示例:

   

 图01

 

 图02        

   当鼠标点击"列表"域时如图01，显示所有列表如图02，鼠标离开所有列表域时,又返回图01效果.如果按照平常我们直接插入节点,删除节点的思维的话,不同浏览器将会出现不同的效果,达不到预期的效果!在火狐浏览器中,鼠标移到该节点的子节点中时,也会调用mouseout事件,这就是我们不想遇到的!IE中时通过的!

     那有上面解决办法呢?在事件中,有这么一个属性relatedTarget,ie中对应的是toElement(鼠标所在当前节点,指向到下一个鼠标所在节点:这样理解可能有点抽象!直接看下面的代码!)

    以下代码我们是在FIRFOX中测试通过的 ,IE中就用toElement试试看

           提示:"其中很多问题都是自己可以去理解和解决的,在javascript中我们可以把EVENT该对象打印出来所有的属性,看看里面的属性值,然后理解该属性的作用!会对你有很大帮助的!"  


  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>onmouseout问题解决</title> 
  6. <style> 
  7.   *{margin:0;padding:0;}   
  8.   .tdiv{background:#C90;width:200px;} 
  9.   .slist{ width:200px;height:200px; background:#0C0;} 
  10.   .show{ display:block;} 
  11.   .hidden{display:none;} 
  12. </style> 
  13. </head> 
  14.  
  15. <body> 
  16.     
  17.    <div class="tdiv"  onclick="tover(event)">列表</div>  
  18.   
  19. </body> 
  20. <script type="text/javascript"> 
  21.    
  22.   <!--   
  23.    
  24.     function tover(e){ 
  25.         var div = document.getElementsByTagName("div")[0]; 
  26.         var reval  = ""; 
  27.         reval += "<div class=\"slist\" onmouseout=\"tout(this,event)\">"; 
  28.         reval += "      <ul>"; 
  29.         reval += "        <li>列表01</li>"; 
  30.         reval += "        <li>列表02</li>"; 
  31.         reval += "      </ul>"; 
  32.         reval += "   </div>"; 
  33.          
  34.         div.parentNode.innerHTML += reval; 
  35.         //alert(e.cancelable); 
  36.         e.preventDefault(); 
  37.         e.stopPropagation(); 
  38.          
  39.     } 
  40.      
  41.     function tout(obj,e){        
  42.          if(e.relatedTarget===e.currentTarget.parentNode){ 
  43.             obj.parentNode.removeChild(obj); 
  44.          }      
  45.     } 
  46.      
  47.     
  48.   --> 
  49.  
  50. </script> 
  51. </html>