onmouseout,mouseover经过子元素也触发的问题解决方案(兼容)

   可以参考这个网站：http://blog.youkuaiyun.com/ltx851201/article/details/6800553

  问题描述：

   当鼠标移入DIV内部的Img或其它元素上时，内部元素的mouseover事件被触发。但是再次将鼠标移动到DIV内部的另一个内部元素时，却会发现首先被触发的是DIV的mouseout事件，紧接着才是当前这个元素的mouseover事件。

  网上找了很多东西最后决定有用的放这里了以备学习之用，感兴趣的朋友可以参考下代码如下:

方法一：

$(".target-menu").mouseout(function(e){ 

evt = window.event || e; 

var obj = evt.toElement || evt.relatedTarget; 

var pa = this; 

if(pa.contains(obj)) return false; 

$(this).hide(); 

}); 

 方法二：

if(typeof(HTMLElement)!="undefined"){
    /*下面这个对contains的扩展方法，主要功能是查找obj元素是否在一个指定的元素之中[或者是否直接与指定的元素一致][直白点，比如判断div_a是否在div_b之内]
       方法就是一直查找obj的父节点，
       如果其某一个父节点与指定的元素一致，则返回true。表明obj被指定的元素所包裹
       如果一直obj不存在父节点时还没有找到与指定元素一致的，则返回false，表明obj并不被指定的元素所包裹
     */   
    HTMLElement.prototype.contains=function (obj){   
        while(obj!=null&&typeof(obj.tagName)!="undefind"){//
            if(obj==this) return true;//这一句就是确认：obj在指定的元素之内 
            obj=obj.parentNode;//这边不是很理解:这一句就是查找指定元素的父节点，当前父节点与指定的元素不一致时，继续往上查找  
        }   
        return false;   
    }
}

function hideMsgBox(theEvent){//theEvent不是很清楚：event对象，用来获取事件源，可以通过它来获取触发事件的对象

//下面这句就是调用上面的扩展方法了：查找触发当前事件的对象[theEvent.relatedTarget]是否在contentid元素之内；
//theEvent.relatedTarget：这个是啥呢。直白点，当你对一个div点击时，这个就等于那个div元素对象
if (document.getElementById("contentid").contains(theEvent.relatedTarget)) {
    return//不是很理解
}