• onmouseover与onmouseout事件冒泡


      在发生mouseover和mouseout事件时,还会涉及更多的元素。这两个事件都会涉及把鼠标指针从一个元素的边界之内移到另一个元素边界之内。对mouseover事件而言,事件的主目标是获得光标的元素,而相关元素就是那个失去光标的元素。类似地,对mouseout事件而言,事件的主目标是失去光标的元素,而相关元素则是获得光标的元素。

      DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值;对于其他事件,这个属性的值是null。IE不支持realtedTarget属性,但提供了保存着同样信息的不同属性。在mouseover事件触发时,IE的fromElement属性中保存了相关元素;在mouseout事件出发时,IE的toElement属性中保存着相关元素。

    以下是我封装的一个兼容格式:  

    function enterAndLeave(ev,obj){
        var E = ev || window.event;  //获取event
        if(E.type != 'mouseover' && E.type != 'mouseout'){  
        
    return flase; }
       //判断当前事件是否是mouseover并且是否是mouseout如果不是的话则退出,因为只有over和out才支持relatedTarget
    var theTarget = null; if(E.relatedTarget){ theTarget = E.relatedTarget; }else{ if(E.type == 'mouseover'){ thisTarget = E.toElement; }else{ thisTarget = E.fromElement; } }
       //做各浏览器的兼容模式获取当前移入或移除的时间对象
    while(theTarget && theTarget != obj){ theTarget = theTarget.parentNode; }
       //当满足存在当前事件对象并且当前事件对象与传进来的对象不相等时执行theTarget赋值为当前对象的父层对象
    return (theTarget != obj);
       //最后return 当前对象是否与传入对象相等 不相等则返回false }

    如何使用:

     对象.onmouseout = function(ev){
          if(enterAndLeave(ev,this)){
              执行的函数
          }else{
              return false;
          }
     }
    //只有当enterAndLeave为true也就是兼容版函数中当前对象与传入对象不相等时
  • 相关阅读:
    如何在Eclipse中查看Java类库的源代码以及相应的api
    深入剖析ConcurrentHashMap
    Java7/8 中的 HashMap 和 ConcurrentHashMap 全解析
    Quartz配置
    Spring 自动定时任务配置
    @Resource注解的官方解释
    @Resource 注解的使用
    扫地机器人会否抛弃激光雷达这位原配?
    女教授领军打造最耐用机器人,可从180米高空落下执行救援任务
    一文看懂80年“AI革命”简史
  • 原文地址:https://www.cnblogs.com/BobSky/p/3104075.html
Copyright © 2020-2023  润新知