div嵌套div，onmouseout事件怎样判断鼠标离开最外面的div

具体代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<script src="jquery-1.6.1.js"></script>
  <script>
function showTab1(){
alert("鼠标进入 F1");
} function disTab1(){
alert("鼠标离开   F1");
} function showTab2(){
alert("鼠标进入 F2");
} function disTab2(){
alert("鼠标离开   F2");
} function showTab3(){
alert("鼠标进入 F3");
} function disTab3(){
alert("鼠标离开   F3");
}  </script>
 </head>
 <body>
  <br/>
  <div id="f1" style="width:400px; height:400px; background:green;" onmouseover="showTab1()" onmouseout="disTab1()">
 <div id="f2" style="width:200px; height:200px; background:blue;" onmouseover="showTab2()" onmouseout="disTab2()">
 <div id="f3" style="width:100px; height:100px; background:red;" onmouseover="showTab3()" onmouseout="disTab3()">
 </div>
</div>
  </div>
<br/>
 
 </body>
</html>
RT：怎样判断鼠标离开了最外面的div f1

解决方案 »

  1.   

    获取最外层的div的所有子元素(包括<a/>、<div/>、<p/>等等)监听document的onmouseover事件判断触发事件的元素是否div或div的子元素
      

  2.   


    var getAllChildNodes = function(obj){//得到某元素的子元素(包括子元素的子元素)
    var nodes = obj.childNodes;
    var arr = [];
    var len = nodes.length;
    for(var i=0;i<len;i++){
    if(nodes[i].tagName!=undefined){
    arr.push(nodes[i]);
    arr = arr.concat(getAllChildNodes(nodes[i]));
    }
    }
    return arr;
    };
    var getChildNodes = function(obj){//得到某元素的子元素(不含子元素的子元素)
    var nodes = obj.childNodes;
    var arr = [];
    for(var i=0;i<nodes.length;i++){
    if(nodes[i].tagName!=undefined){
    arr.push(nodes[i]);
    }
    }
    return arr;
    };
    var inArray = function(arr,obj){//判断制定数组中是否存在制定元素
    for(var i=0;i<arr.length;i++){
    if(arr[i]==obj) return true;
    }
    return false;
    };
    document.onmouseover=function(event){
    //事件监听最好用addEventListener/attachEvent，不过因为需要写兼容代码，这里就不用它们了
    if(document.all)event.target=event.srcElement;
    var allNodes=getAllChildNodes(document.getElementById("你的DIV的ID"));
    if(!inArray(allNodes,event.target)){//这里的条件根据你的需求自己改改
    //onmouseover不在指定DIV的子元素上
    }
    }
      

  3.   


    <html>
     <head>
      <title> New Document </title>
       <script>
    function xx(){
    //alert("鼠标进入："+window.event.srcElement.id);
    }
    function yy(){
    var src = window.event.srcElement;
    if(src.id == "f1"){
    alert("鼠标离开："+src.id);
    }
    }
      </script>
     </head>
     <body>
      <br/>
      <div id="f1" style="width:400px; height:400px; background:green;" onmouseover="xx()" onmouseout="yy()">
             <div id="f2" style="width:200px; height:200px; background:blue;" onmouseover="xx()" onmouseout="yy()">
                 <div id="f3" style="width:100px; height:100px; background:red;" onmouseover="xx()" onmouseout="yy()">
                 </div>
            </div>
      </div>
    <br/>
     
     </body>
    </html>
      

  4.   


    可能我说的有点问题，是怎样判断鼠标离开div f1这块区域
      

  5.   

    冒泡了是吧……<div id="f1" style="width:400px; height:400px; background:green;">
             <div id="f2" style="width:200px; height:200px; background:blue;">
                 <div id="f3" style="width:100px; height:100px; background:red;">
                 </div>
            </div>
      </div>
    function test_out(id){
    var _this = this, obj = document.getElementById(id);
    this.in_dom = function(m,n){
    if (m==n) return true;
    else if (!m.parentNode) return false;
    else if (m.parentNode==n) return true;
    else return _this.in_dom(m.parentNode,n);
    };
    obj.onmouseout = function(event){
    var e = arguments[0]||window.event;
    var x = e.relatedTarget||e.toElement; // 鼠标滑出的目标元素
    if (!_this.in_dom(x,obj)){
    alert("移出来了");
    }
    }
    }
    用的时候
    var xx = new test_out("f1");
    方法是，触发onmouseout的时候，判断鼠标当前位置的元素是不是它的子元素，如果是的话不触发。
    如果不是它的子元素，那就是移出来了。
      

  6.   

    方法1：
    $("#f1").hover (
        function(){
            alert('我在里边')
        },
        function(){
            alert('我出来了‘)
        }
    );方法2：
    $("#f1").mouseenter (
        function(){
            alert('我在里边')
        }
    );
    $("#f1").mouseleave (
        function(){
            alert('我出来了')
        }
    );以上方法不会存在子div和父div之间的混乱关系，你可以试试，欢迎给分