解決滑鼠經過內部元素觸發onmouseout事件的問題

解決滑鼠經過內部元素觸發onmouseout事件的問題

最近在做一個JS效果時，發現了這麼個問題：

   當滑鼠移入DIV內部的Img或其它元素上時，內部元素的mouseover事件被觸發。但是再次將滑鼠移動到DIV內部的另一個內部元素時，

   卻會發現首先被觸發的是DIV的mouseout事件，緊接著才是當前這個元素的mouseover事件。

   在網上百度尋找到了一些資料，現在做下總結：

   方法一： 通過設定Settimeout

   當滑鼠觸發外層的mouseout事件時，開始計時Settimeout，一段時間後再去執行mouseout需要執行的函數， 這段時間是為了判斷滑鼠    是否移動到了其內部元素。

   當滑鼠mouseover到了內部元素上時，這時候會觸發它本身以及外層的mouseover事件，這時在事件中使用clearTimeout來消除之前定    時的out後要執行的函數。

   例：
view plaincopy to clipboardprint?

   1. var timeId;  // 全域變數 用來計時 
   2.     function mouseOver() 
   3.     { 
   4.         cleartimeout(timeId); // 當觸發onmouseover事件時，先清除滑鼠移出事件的函數。 
   5.         ... //後去處理觸發mouseover事件要執行的函數 
   6.     } 
   7.      
   8.     function mouseout() 
   9.     { 
  10.         timeId = setTimeout("outMethod()",100);  //先將mouseout要執行的函數延時執行。這段時間是為了判斷滑鼠是否移動到了其內部元素。 
  11.     } 

var timeId; // 全域變數 用來計時 function mouseOver() { cleartimeout(timeId); // 當觸發onmouseover事件時，先清除滑鼠移出事件的函數。 ... //後去處理觸發mouseover事件要執行的函數 } function mouseout() { timeId = setTimeout("outMethod()",100); //先將mouseout要執行的函數延時執行。這段時間是為了判斷滑鼠是否移動到了其內部元素。 } 
   方法二： 通過Contains
   通過Contains判斷滑鼠OUT的時候，是否OUT到了它的內部元素上，也就是說，要判斷滑鼠OUT的時候移動到的元素是不是屬於這個元素      的內部元素。
  
   比如在觸發事件後本是要這麼執行函數：
view plaincopy to clipboardprint?

   1. function mouseout() 
   2.   { 
   3.   outMethod(); 
   4.   } 

function mouseout() { outMethod(); } 
現因為需要在執行函數前，先去判斷在這個事件中滑鼠移動到的元素是否是包含在它本身當中，不屬於時才執行後面函數：
view plaincopy to clipboardprint?

   1. function mouseout() 
   2.    { 
   3.         if(!this.contains(event.toElement)) 
   4.         { 
   5.             outMethod(); 
   6.         } 
   7.    } 

function mouseout() { if(!this.contains(event.toElement)) { outMethod(); } } 
 但是這個contains只有IE支援，為了讓非IE支援就有了下面這段代碼，增加了這麼個contains函數：
view plaincopy to clipboardprint?

   1. if(typeof(HTMLElement)!="undefined"){    
   2.       HTMLElement.prototype.contains    =    function(obj) {    
   3.           while(obj!=null    &&    typeof(obj.tagName)!="undefind"){ 
   4.        if(obj==this)     
   5.        return    true;     
   6.        obj=obj.parentNode; 
   7.        }     
   8.        return    false;    
   9.       };    
  10.   } 

if(typeof(HTMLElement)!="undefined"){ HTMLElement.prototype.contains = function(obj) { while(obj!=null && typeof(obj.tagName)!="undefind"){ if(obj==this) return true; obj=obj.parentNode; } return false; }; }
   其實就是不停的找滑鼠移動到的元素的父元素，看這個父元素是不是就是滑鼠原來呆的地方。
   如果這個元素他爹或他爺爺就是這個滑鼠剛開始OUT出來的元素，那麼這個元素肯定就是滑鼠OUT出來的元素的內部元素。
  
   其中‘狼問蒼穹‘的部落格寫的十分的詳細：
   <a herf="http://www.cnblogs.com/zhaoshun/archive/2009/01/16/1376998.html"> 解決HTML內部元素的Mouse事件幹擾（執行個體,相容ff,ie）</a>