解决鼠标经过内部元素触发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>