JS onMouseOut 事件问题的处理方式-CFANZ编程社区

JS onMouseOut 事件问题的处理方式

javascript 操作DOM验证是否是子节点

验证是否是子节点

function isFatcher(p, c2){
    var c = c2;
    while(c.parentNode){
      c = c.parentNode;
      if(c == p)
        return true;
    }
    return false;
  }

一个demo：

<html>
<head>
<title>无标题文档</title>
<script type="text/javascript">

  /**
  * 描述：c2是否是p的子节点
  * p:父节点；
  * c2:子节点；
  **/
  function isFatcher(p, c2){
    var c = c2;
    while(c.parentNode){
      c = c.parentNode;
      if(c == p)
        return true;
    }
    return false;
  }

  function showFun(light){
    document.getElementById(light).style.display='block';
  };
  
  function closeFun(obj,e){
    if (e.currentTarget) {
      if (e.relatedTarget != obj) {
        var flag = isFatcher(obj,e.toElement);
        if(!flag){
          obj.style.display='none';
        }
      }
    } else {
       if (e.toElement != obj) {
        var flag = isFatcher(obj,e.toElement);
        if(!flag){
          obj.style.display='none';
        }
       }
     }
  };
</script>

</head>

<body>

<div  style="width:50px; height:40px; border:1px solid red;" onMouseMove="showFun('div001')"></div>

<div id="div001" style=" position:absolute; top:100px;width:300px; height:200px; border:1px solid #0066CC; display:none;" onMouseOut="closeFun(this,event)" >
  <div >
    abc
    <div>1234555555555</div>
    abc
  </div>
  
  <table>
    <tr>
      <td>dddd</td>
    </tr>
  </table>
</div>

</body>
</html>

0 条评论