非IE浏览器实现onmouseenter

每次遇到onmouseover事件的处理就头疼。比如父标签A里面嵌套了两个子标签，分别为标签A1和A2。假设你在父标签A上绑定了mouseover事件，理想的状态应该是：当鼠标从A标签外移到A标签上，事件触发。

但实际情况是，在以下几种情况下，mouseover事件都会被触发，下图为mouseover事件触发示意图（mouseout事件类似）。

  1. 当鼠标从A标签外移到A标签上。
  2. 当鼠标从父标签A移入子标签B（或C）。
  3. 当鼠标从子标签B移入子标签C（假设间距足够小的话）。

mouseover事件触发情况

mouseover事件触发示意图

之前一直是通过在事件处理函数里面判断触发当前时间的targe是否指定节点来解决上面问题，问题是，当标签嵌套层次比较多的时候，这个判断过程就变得很麻烦，还会让处理函数里面多处一堆跟逻辑不相关的代码。

请教了某同事，IE浏览器支持mouseenter事件，可以轻松搞定以上问题，刚好现在手头做的东西也是只需要支持IE浏览器（\(^o^)/）。然后就想了，如果突然需求变更说要支持其他非IE浏览器了，那不就惨了（这也是很有可能发生的），像firefox、chrome都是不支持mouseenter的。那就只能自己试着去模拟下了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>在非IE浏览器里模拟mouseenter、mouseleave事件</title>
<style>
.outer{width:400px;height:300px;background:#ccc;}
.inner{float:left;width:150px;height:150px;margin:20px;background:#000;}
</style> 
</head> 
<body> 

<div id="outer" class="outer">

    <div id="innerA" class="inner"></div>
    <div id="innerB" class="inner"></div>
</div>
<div id="output"></div>
</div> 
</body>
 
<script>
var EventUtil = {
    //事件绑定
    addEvent:function(element,type,handler){
    
        if(element.attachEvent){    //为IE浏览器
        
            element.attachEvent("on"+type,handler);
            
        }else if(element.addEventListener){    //firefox、chrome等浏览器
            
            if(type=="mouseenter" || type=="mouseleave"){    //对“mouseenter”、“mouseleave”事件做单独绑定处理
                
                //利用“mouseover”、“mouseout”来模拟“mouseenter”、“mouseenter”
                var eType = (type=="mouseenter")?"mouseover":"mouseout";
                element.addEventListener(eType,EventUtil.wrapHandler(handler),false);
            }else{
            
                element.addEventListener(type,handler,false);
            }
            
        }else{    //其他浏览器
            
            element["on"+type] = handler;
        }
    },
    //对事件处理函数进行包装
    //如果触发事件的元素跟绑定事件的元素相同，则调用处理函数
    wrapHandler:function(handler){
        
        var func = function(event){
        
            var target = event.target;
            var parent = event.relatedTarget;
            
            while(parent && parent!=this){    //
                
                try{parent = parent.parentNode;}
                catch(e){break;}
            }
            //parent不等于this，说明触发事件的正是绑定事件的element本身
            (parent!=this)    && (handler.call(target,event));
        };
        
        return func;
    },
    //事件移除，省略
    removeEvent:function(element,handler){
        
        //这里没有任何东西
    }
};
function $(id){return document.getElementById(id);}

EventUtil.addEvent($("outer"),"mouseenter",handler);
EventUtil.addEvent($("outer"),"mouseleave",handler);

//
function handler(e){
    
    var event = null,target = null;
    if(window.event){
        event = window.event;
        target = e.srcElement;
    }else{
        event = e;
        target = e.target;
    }
    $("output").innerHTML += event.type+":"+target.id+"<br/>";
}
</script>

在firefox和IE 8里简单测试了下，顺利运行，搞定！

以上只是简单地在非IE浏览器里模拟了mouseenter和mouseleave事件，只是实验下，代码写的有点挫各种见谅，主要的是实现的原理。

文章参考了另一篇博文：http://kb.cnblogs.com/a/1627921/，写得不错，就是不知道为什么下面的“运行代码”一直没反应。



posted @ 2011-10-30 23:18  程序猿小卡  阅读(1494)  评论(0)  编辑  收藏  举报