[转]解决鼠标经过内部元素触发onmouseout事件的问题
转自?http://sinian1120na.blog.163.com/blog/static/2458050820097151033950/
?
这个貌似没有太简洁的方法, ?只有clearTimeout和if contains两种...
?
最近在做一个JS效果时，发现了这么个问题：
? ?当鼠标移入DIV内部的Img或其它元素上时，内部元素的mouseover事件被触发。但是再次将鼠标移动到DIV内部的另一个内部元素时，
? ?却会发现首先被触发的是DIV的mouseout事件，紧接着才是当前这个元素的mouseover事件。
?
? ?在网上百度查找到了一些资料，现在做下总结：
?
? ?方法一： 通过设置Settimeout
??
? ? 当鼠标触发外层的mouseout事件时，开始计时Settimeout,一段时间后再去执行mouseout需要执行的函数；这段时间是为了判断鼠标是否移动到了其内部元素。
?当鼠标mouseover到了内部元素上时，这时候会触发它本身以及外层的mouseover事件，这时在事件中使用clearTimeout来消除之前定时的out后要执行的函数。
?
?例：
?var timeId; ?// 全局变量 用来计时
?function mouseOver()
?{
? cleartimeout(timeId); // 当触发onmouseover事件时，先清除鼠标移出事件的函数。
? ... //后去处理触发mouseover事件要执行的函数
?}
?
?function mouseout()
?{
? timeId = setTimeout("outMethod()",100); ?//先将mouseout要执行的函数延时执行。这段时间是为了判断鼠标是否移动到了其内部元素。
?}
?
?
? ?方法二： 通过Contains
? ?通过Contains判断鼠标OUT的时候，是否OUT到了它的内部元素上，也就是说，要判断鼠标OUT的时候移动到的元素是不是属于这个元素的内部元素。
? ?
? ?比如在触发事件后本是要这么执行函数：
? ?function mouseout()
? ?{
? ?outMethod();
? ?}
?
? ?现因为需要在执行函数前，先去判断在这个事件中鼠标移动到的元素是否是包含在它本身当中，不属于时才执行后面函数：
? ?function mouseout()
? ?{
? if(!this.contains(event.toElement))
? {
? ?outMethod();
? }
? ?}
?
? ?但是这个contains只有IE支持，为了让非IE支持就有了下面这段代码，增加了这么个contains函数：
? ?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出来的元素的内部元素。?
