zoukankan      html  css  js  c++  java
  • 非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{400px;height:300px;background:#ccc;}
    .inner{float:left;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/,写得不错,就是不知道为什么下面的“运行代码”一直没反应。



  • 相关阅读:
    几何画板表现两集合的差集的教程
    MathType如何编辑大三角形符号
    几何画板如何绘制动态正切函数图像
    MathType如何设置标尺的单位
    模拟按键
    oauth2.0
    PHP CURL POST提交
    Eclipse导入到web项目没有run on server
    实时刷新
    js 实时数据显示
  • 原文地址:https://www.cnblogs.com/chyingp/p/implementsmouseenter.html
Copyright © 2011-2022 走看看