兼容ie/非ie实现mouseenter/leave,禁止mouseout/over冒泡

来源:互联网 发布:网页界面设计软件 编辑:程序博客网 时间:2024/04/30 02:55

       
        var getEvent = function (e) {
            return window.event || e;
        }
        /*
         * 检测鼠标是否属于指定元素区域内(包含本元素)移动触发的事件,用于区分"外围<->内围" 与"内围 <-> 内围"的移动事件
         */
        var isNoLoop = function (target, e) {  
            var contains = function(parentNode, childNode) {
                if (parentNode.contains) {
                    return parentNode != childNode && parentNode.contains(childNode);
                } else {
                    return !!(parentNode.compareDocumentPosition(childNode) & 16);
                }
            }
            
            if (getEvent(e).type =="mouseover") {
                return !contains(target,getEvent(e).relatedTarget||getEvent(e).fromElement) && !((getEvent(e).relatedTarget||getEvent(e).fromElement)===target);
            } else {
                return !contains(target,getEvent(e).relatedTarget||getEvent(e).toElement) && !((getEvent(e).relatedTarget||getEvent(e).toElement)===target);
            }
        }

 

----阻击冒泡示例一---


        barDiv.onmouseover = function(e){//移入,需要清除定时隐藏
            if (isNoLoop(this, (window.event || e))) {
                clearTimeout(chrdNav.prevNaver);
            }
        }

--------阻击冒泡示例二---

navId.onmouseover = function(e) {//移入显示子菜单
            (window.event || e).cancelBubble = true;//即在子元素之间的移动不会触发此事件

原创粉丝点击