关于多个DIV之间onmouseover和onmouseout事件的问题！

有如下一段HTML代码：<HTML>
 <HEAD>
 </HEAD> <BODY>
   <div id="div1" style="width:300px;height:300px;background-color:green;position:relative" onmouseover="alert(1)" onmouseout="alert(2);">
<div id="div2" style="width:100px;height:300px;background-color:yellow;position:absolute" >div2</div>
<div id="div3" style="left:100px;width:100px;height:100px;background-color:red;position:absolute">div3</div>
   </div> </BODY>
</HTML>
现有如下几个需求：
1）鼠标移入div1里面时触发div1的onmouseover，在移出div1时触发div1的onmouseout。
2）鼠标在div1里面任意位置处移动，均不触发div1的onmouseover和onmouseout事件。
3）但鼠标从左测移入div2时和移出div2时，均要触发div1的onmouseover和onmouseout事件，因为div1的范围包含div2和div3的范围
说明：div1的范围包含了div2和div3

解决方案 »

  1.   

    昨天回复了一个jquery的，可参考一下：
    传送门<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        function div_hover(){
    var levels = {};
    var min = 100, max = 0;
    var change = function() {
    var q = 0;
    for (var p in levels) {
    $(levels[p]).removeClass("hover");
    q = Math.max(q, p);
    }
    $(levels[q]).addClass("hover");
    };
    var getLevel = function(element) {
    var level = 0;
    for (var parent = element; parent.parentNode; parent = parent.parentNode) level++;
    return level;
    };
            $("div").hover(
                function(){
    levels[getLevel(this)] = this;
                    change();
                },
                function(){
    delete levels[getLevel(this)];
                    $(this).removeClass("hover");
    change();
                }
            );
        }
        $(function(){
            div_hover();
        });
    </script>
    <style type="text/css">
        .box1{background:green;width:400px;height:400px;}
        .box2{background:yellow;width:300px;height:300px;}
        .box3{background:#c33;width:200px;height:200px;}
        .box4{background:#f0f;width:100px;height:100px;}
        .hover{background:#33cc33}
    </style>
    <div class="box1">
        <div class="box2">
            <div class="box3">
    <div class="box4"></div>
    </div>
        </div>
    </div>
      

  2.   

    没用过JQUERY。麻烦帮忙改一下好吗？
      

  3.   

    参考：<style>
    #father{
      width:500px;
      height:500px;
      left:100px;
      top:100px;
      position:absolute;
      border:1px solid red;
      margin:0px;
      padding:0px;
    }
    #son{
      width:400px;
      height:95px;
      position:reletive;
      border:1px solid blue;
    }
    </style>
    <div id="father" onmouseout="restict(this,event)" onmouseover="this.style.backgroundColor='yellow'">
      <div id='son'>0</div>
      <div id='son'>1</div>
      <div id='son'>2</div>
      <div id='son'>3</div>
      <div id='son'>4</div>
    </div>  
    <script>
    function restict(o,e){
      var x=0,y=0;
      var l=o.offsetLeft, t=o.offsetTop;
      var w=o.offsetWidth, h=o.offsetHeight;
      x=e.pageX||e.clientX, y=e.pageY||e.clientY;
      if((x>l && x<(l+w)) &&(y>t && y<(t+h))){
        if(e){e.stopPropagation();  return}
        else{ e.cancelBubble=true;  return}
      }
      //alert("出界啦~")
      o.style.backgroundColor='#ff0000'
    }
    </script>
      

  4.   

    else{ e.cancelBubble=true;  return}
    --------->>改为
    else{ window.event.cancelBubble=true; return}
      

  5.   

    楼主是本人吗？？没用过JQUERY！难道改行了？呵呵！
      

  6.   

    <style>
    #father{
      width:500px;
      height:500px;
      left:100px;
      top:100px;
      position:absolute;
      border:1px solid red;
      margin:0px;
      padding:0px;
    }
    #son{
      width:400px;
      height:95px;
      position:reletive;
      border:1px solid blue;
    }
    </style>
    <div id="father" onmouseout="restict(this,event)" onmouseover="this.style.backgroundColor='yellow'">
      <div id='son'>0</div>
      <div id='son'>1</div>
      <div id='son'>2</div>
      <div id='son'>3</div>
      <div id='son'>4</div>
    </div>  
    <script>
    function restict(o,e){
      var x=0,y=0;
      var l=o.offsetLeft, t=o.offsetTop;
      var w=o.offsetWidth, h=o.offsetHeight;
      x=e.pageX||e.clientX, y=e.pageY||e.clientY;
      if((x>l && x<(l+w)) &&(y>t && y<(t+h))){
        if(window.event){e.cancelBubble=true; return}
        else{e.stopPropagation();  return }//stopPropagation是MOM标准的，IE6下的不行的，故必须颠倒一下顺序！
      }
      //alert("出界啦~")
      o.style.backgroundColor='#ff0000'
    }
    </script>
      

  7.   

    可以通过触发事件的元素判断：
    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    <div id="div1" style="width:300px;height:300px;background-color:green;position:relative">
    <div id="div2" style="width:100px;height:300px;background-color:yellow;position:absolute">div2</div>
    <div id="div3" style="left:100px;width:100px;height:100px;background-color:red;position:absolute">div3</div>
    </div>
    <script>
    document.getElementById("div1").onmouseover = function (e) {
    var element = e ? e.target : event.srcElement;
    if (element == this) alert(1);
    };
    document.getElementById("div1").onmouseout = function (e) {
    var element = e ? e.target : event.srcElement;
    if (element == this) alert(2);
    };
    </script>
    </BODY>
    </HTML>
      

  8.   

    看看这个可以吗？前提是内层DIV加了1px的左框距margin-left=1px;同时为兼容IE6,x>=l+2
    <div id="div1" style="width:300px;height:300px;background-color:green;position:relative" onmouseover="this.style.backgroundColor='lightblue';" onmouseout="restict(this,event);">
        <div style="margin-left=1px;width:100px;height:300px;background-color:yellow;position:absolute" >div2</div>
        <div id="div3" style="left:100px;width:100px;height:100px;background-color:red;position:absolute">div3</div>
    </div><script>
    function restict(o,e){
      var x=0,y=0;
      var l=o.offsetLeft, t=o.offsetTop;
      var w=o.offsetWidth, h=o.offsetHeight;
      x=e.pageX||e.clientX, y=e.pageY||e.clientY;
      if((x>=l+2 && x<(l+w)) &&(y>=t && y<(t+h))){
        if(!document.all){e.stopPropagation(); return}
        else{e.cancelBubble=true;return}
      }
      o.style.backgroundColor='green'
    }
    </script>
      

  9.   

    可以在div2和div1之上创建一个用于承接事件的透明div来屏蔽div2和div3的事件触发以下测试代码中，divEvent即为用于阻止事件传递的div：<HTML>
     <HEAD> <SCRIPT LANGUAGE="JavaScript">
     <!--
    function overTest(){
    var d = document.getElementById("span1");
    d.innerHTML +="移入 div1" + "<br/>";
    }
    function outTest(){
    var d = document.getElementById("span1");
    d.innerHTML +="移出 div1" + "<br/>";
    }
    function clearDivTest(){
    var d = document.getElementById("span1");
    d.innerHTML = "";
    }
     //-->
     </SCRIPT>
     </HEAD> <BODY>
       <div id="div1" style="left:100px;width:300px;height:300px;background-color:green;position:relative;" onmouseover="overTest()" onmouseout="outTest()"> <div id="divEvent" style="position:absolute;width:100%;height:100%;z-index:2"></div> <div id="div2" style="width:100px;height:290px;background-color:yellow;position:absolute;z-index:1" >div2</div>
    <div id="div3" style="left:100px;width:100px;height:100px;background-color:red;position:absolute;z-index:1";>div3</div>
    <p>sdf</p>
       </div>   <div id="divtest" style="top:350px;width:250px;height:250px;background-color:blue;position:absolute;z-index:3">
    测试结果：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onclick="clearDivTest()" value="清除测试结果"><br/>
    <span id="span1">

    </span>
       </div>
     </BODY>
    </HTML>
      

  10.   

    可以在div2和div3之上创建一个用于承接事件的透明div来屏蔽div2和div3的事件触发以下测试代码中，divEvent即为用于阻止事件传递的div：<HTML>
     <HEAD> <SCRIPT LANGUAGE="JavaScript">
     <!--
    function overTest(){
    var d = document.getElementById("span1");
    d.innerHTML +="移入 div1" + "<br/>";
    }
    function outTest(){
    var d = document.getElementById("span1");
    d.innerHTML +="移出 div1" + "<br/>";
    }
    function clearDivTest(){
    var d = document.getElementById("span1");
    d.innerHTML = "";
    }
     //-->
     </SCRIPT>
     </HEAD> <BODY>
       <div id="div1" style="left:100px;width:300px;height:300px;background-color:green;position:relative;" onmouseover="overTest()" onmouseout="outTest()"> <div id="divEvent" style="position:absolute;width:100%;height:100%;z-index:2"></div> <div id="div2" style="width:100px;height:290px;background-color:yellow;position:absolute;z-index:1" >div2</div>
    <div id="div3" style="left:100px;width:100px;height:100px;background-color:red;position:absolute;z-index:1";>div3</div>
    <p>sdf</p>
       </div>   <div id="divtest" style="top:350px;width:250px;height:250px;background-color:blue;position:absolute;z-index:3">
    测试结果：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onclick="clearDivTest()" value="清除测试结果"><br/>
    <span id="span1">

    </span>
       </div>
     </BODY>
    </HTML>