zoukankan      html  css  js  c++  java
  • [javascript]mouseenter/mouseleave

     

      事件委托的概念大家都很清楚,如果在某个元素上使用mouseover/mouseout的话,很有可能就被动的委托了这个事件。该元素中的子元素都会触发mouseover/mouseout 而且无法通过停止冒泡来处理这个烦人的意外情况。

      在ie上有两个非常好的事件,mouseenter/mouseleave他们不会冒泡,当然不会产生这个问题。新版本的ff10 opera11都有支持这个事件。遗憾的是chrome19还没有支持。 流行的类库比如jquery已经支持这个事件了。对于不支持这两个事件的浏览器必须自己处理了。

      通过处理mouseover/mouseout也可以达到mouseenter/mouseleave同样的目的。这个关键点在于我们判断mouseover/mouseout元素和事件监听的元素的关系,如果是包含关系就不执行操作。

    我们通过事件函数得到event对象,通过event的相关属性来确定元素的关系。

     

    elem.onmouseover=function(e){
          var e=window.event || e, target= e.currentTarget,related= e.relatedTarget || e.fromElement;
    }
    

      用currentTarget可以获得事件的目标节点,relatedTarget 可以获得事件的目标节点相关的节点。ie的话是fromElement/toElement从字面意思也很好理解从那个节点来的/到达那个节点。所有相关节点都已经获得,这样我们只要比较他们的关系是不是包含的。Dom也提供了相关的方法,非ie的用compareDocumentPosition这个有很多值一时比较难说的清,ie的是contains 只会得到true或者false(关于这个方法ppk john resing都有比较优雅的封装,有兴趣可以搜索一下)。

    我使用的是这个版本

    function contains (a,b){
        try {return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b)&16)}catch(e){};
    };

      

    elem.onmouseover=function(e){
      var e=window.event || e, target= e.currentTarget,related= e.relatedTarget || e.fromElement;//注意这里
      if(!contains(target, related) && target!==related){   
        //执行代码
      } 
    }
    elem.onmouseout=function(e){
      var e=window.event || e, target= e.currentTarget,related= e.relatedTarget || e.toElement;//注意这里
      if(!contains(target, related) && target!==related){   
        //执行代码
      } 
    }

    听同事说是用鼠标范围来确定是不是包含关系,相比这个也是一个不错的方案有兴趣可以实现一下。

    相关资料见

    ppk   http://www.quirksmode.org/js/events_mouse.html

    mdn  https://developer.mozilla.org/en/DOM/DOM_event_reference/mouseleave

    john resig http://ejohn.org/blog/comparing-document-position/

      

  • 相关阅读:
    Windows 经典DOS命令大全
    Linux常用命令大全(全面)
    Nova 实现的 Fit Instance NUMA to Host NUMA 算法
    计算机组成原理 — 冯诺依曼体系结构
    计算机组成的基本硬件设备
    OpenStack 高性能虚拟机之大页内存
    Ironic 的 Rescue 救援模式实现流程
    SQLite 版本引发的 Python 程序调用问题
    Ceph 故障修复记录(持续更新)
    注册 Ironic 裸金属节点并部署裸金属实例
  • 原文地址:https://www.cnblogs.com/enix/p/2393930.html
Copyright © 2011-2022 走看看