子元素oumouseover触发父元素onmouseout

几个对象及方法，分别如下：

　　1、事件对象；

　　2、事件对象相关属性（只针对onmouseover及onmouseout），即fromElement、toElement、relatedTarget；

　　3、判断一个元素是否包含另一个元素的方法，即element.contains(Node)与element.compareDocumentPosition(Node)

/* 
 * 功能：鼠标移入对象触发事件，兼容所有浏览器并防止鼠标在父子对象间移动造成的触发onmouseover的bug
 * 参数：第一个参数表示触发的对象，第二个参数表示触发的对象的事件对象，第三个对象表示要执行的函数
 */
function mouseover(a, e, func) {  
    e = e || window.event;
    var b = e.fromElement || e.relatedTarget;

    mouseoverAndOut(a, b, func);
}
/* 
 * 功能：鼠标移出对象触发事件，兼容所有浏览器并防止鼠标在父子对象间移动造成的onmouseout的bug
 * 参数：第一个参数表示触发的对象，第二个参数表示触发的对象的事件对象，第三个对象表示要执行的函数
 */
function mouseout(a ,e, func) {  
    e = e || window.event;
    var b = e.toElement || e.relatedTarget;
    mouseoverAndOut(a, b, func);
}
/* 
 * 功能：鼠标移入或移出对象触发事件，兼容所有浏览器并防止鼠标在父子对象间移动造成的onmouseover & onmouseout的bug
 * 参数：第一个参数表示触发的对象，第二个参数表示触发的对象的事件对象，第三个对象表示要执行的函数
 */
function mouseoverOrOut(a, e, func) {  
    e = e || window.event;
    var b;
    if (e.type == 'mouseover') {
        b = e.fromElement || e.relatedTarget;
    } else if (e.type == 'mouseout') {
        b = e.toElement || e.relatedTarget;
    }
    mouseoverAndOut(a, e, func);
}
/* 
 * 功能：鼠标移入或移出对象触发事件，兼容所有浏览器并防止鼠标在父子对象间移动造成的onmouseover & onmouseout的bug
 * 参数：第一个参数表示触发的对象，第二个参数表示触发的对象的相关对象，第三个对象表示要执行的函数
 */
function mouseoverAndOut(a, b, func) {  
    if (document.all) {
        if (!(a.contains(b))) {
            func();
        }
    } else {
        var res = a.compareDocumentPosition(b);
        if(!(res == 20 || res == 0)){        
                func();
            }       
    }           
}