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

刚才的帖子描述的有点问题，是怎样判断鼠标离开最外面的div的那块区域，也就是怎样判断鼠标
离开f1那块区域
<!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>

解决方案 »

  1.   

    DOM事件模型默认的是冒泡型事件流
    当在某一个元素上触发某个事件时，该事件会冒泡向上传递，也就是它的父节点会触发同样的事件，父父节点也会触发相同的事件。一直到跟元素。。在本例中，根据它们的嵌套关系，当鼠标进入f3时，会依次触发f3,f2,f1的mouseover事件，当鼠标离开f3时，同样会依次触发f3,f2,f1的mouseout事件，也就是事件永远是从里向外传递的。。那么，当鼠标从f3进入f2时，会依次触发f3,f2,f1的mouseout事件，再依次触发f2，f1的mouseover事件至于楼主问的如何判别离开f1区域，当鼠标从f1移到整个区域外，算是离开，这时只会触发f1的mouseover事件，因为它的父元素没有任何mouseover事件函数了。。当鼠标从f1移到f2中，也算是离开f1，这时，会触发f1的mouseout事件，然后会依次触发f2,f1的mouseover事件（记得是事件是冒泡的）..不知解释明白与否？
      

  2.   

    上面倒数第三段笔误，当鼠标从f1移到整个区域外，算是离开，这时只会触发f1的mouseout事件，因为它的父元素没有任何mouseout事件函数了。。
      

  3.   

    <div style="border: 1px solid black; width: 350px;" onmouseout="var out = document.getElementById('out'); out.value = parseInt(out.value) + 1;" onmouseover="var over = document.getElementById('over'); over.value = parseInt(over.value) + 1;">  
        Try moving the mouse in and out of this div   
        <div style="background: #efe; margin: 20px; width: 160px; border: 5px solid black;">and the nested div</div>  
    </div>  
    <p>  
        mouseovers <input id="over" value="0">  
        mouseouts <input id="out" value="0"><br>  
    </p>  
      
    <div style="border: 1px solid black; width: 350px;" onmouseout="var leave = document.getElementById('leave'); if (isMouseLeaveOrEnter(event, this)) leave.value = parseInt(leave.value) + 1;" onmouseover="var enter = document.getElementById('enter'); if (isMouseLeaveOrEnter(event, this)) enter.value = parseInt(enter.value) + 1;"  
    >  
        Try moving the mouse in and out of this div   
        <div style="background: #efe; margin: 20px; width: 160px; border: 5px solid black;">and the nested div</div>  
    </div>  
    <p>  
        mouseenters <input id="enter" value="0">  
        mouseleaves <input id="leave" value="0"><br>  
    </p> 
    <script>
    function isMouseLeaveOrEnter(e, handler) {     
        if (e.type != 'mouseout' && e.type != 'mouseover') return false;     
        var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;     
        while (reltg && reltg != handler)     
            reltg = reltg.parentNode;     
        return (reltg != handler);     
    }  </script>这就一个冒泡，上面这个是个经典实例，运行一下就明白了
      

  4.   


    http://user.qzone.qq.com/871737299/vote/1047703094
    哈哈，没事过来逛逛，不会有影响吧