|M| 对控件的 onmouseout() 的无奈， 请大有帮看看要怎么做 谢谢

<div id=menu  onmouseout="menuhidden()">
  <table>
    ....
  </table>
</div>
故事是这样的
我要想一个菜单<div id=menu>
当我点击菜单让他显示出来的时候
我希望用户鼠标离开这个DIV范围的时候
隐藏掉这个DIV
然后我就在这个DIV添加onmouseout（）
－－－
但当鼠标移到table的时候div也会执行onmouseout事件
因为这时鼠标已经离开div面来到table
－－－－－－－－－
请问我要如何实现
当鼠标不在DIV的范围之内时隐藏DIV

解决方案 »

  1.   

    http://dotnet.aspx.cc/article/C81AD80E-FC14-4FF8-85F3-16CC68811BD5/read.aspx
    看看孟子的这篇文章
      

  2.   

    <style type="text/css">
    <!--
    #div1{
    position:absolute;
    left:11px;
    top:33px;
    width:58px;
    height:35px;
    z-index:1;
    background-color: #CCCCCC;
    visibility: hidden;
    }//层的样式设定  
    -->
    </style>
    <script type="text/JavaScript">
    <!--
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }function MM_showHideLayers() { //v6.0
      var i,p,v,obj,args=MM_showHideLayers.arguments;
      for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
        if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
        obj.visibility=v; }
    }
    //-->
    </script>//显示/隐藏层的函数
    </head>
    <body>
    <button id=button1 onclick="MM_showHideLayers('div1','','show')">菜单</button>//点击显示层
    <div id="div1" onmouseover="MM_showHideLayers('div1','','show')" onmouseout="MM_showHideLayers('div1','','hide')">   //层的隐藏
    <table>
      <tr><td>1111111111</td></tr><tr><td >221111111</td>
    </tr><tr>
      <td>33111111</td>
    </tr></table></div>
      

  3.   

    在mouseout事件里写个for循环,一直找鼠标当前所在的对象的父对象,如果不是那个div则继续往上找,直到空,隐藏div,如果当某个父对象是那个div则不隐藏
      

  4.   

    yiyioo(天一(学习)) 这要的话要那那个层外的进行判断不太科学
    －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
    belldandy11(菜菜虫) 
    正解
    但，太占用CPU了
    －－－－－－－－－－－－－－－－－－－－－－－－－
      

  5.   

    javascript问题，可以去那个板块问一下。你的特定div对象要使用自己的属性记录“展开/关闭”状态，但是并不是立刻执行，而是推迟（例如1秒钟之后）执行，可以使用一个setInterval定时轮询判断是否改变显示状态，或者使用一个属性记录setTimeout的结果并且在更新这个属性之前首先使用ClearTimeout来清除上一个计时器。div下边的所有对象应该都有此mouseover和mouseout属性，都能展开/关闭div。由于有延时，所以当鼠标从一个内部对象转移到另外一个的时候，总能保持最后一个状态而不会让div频繁改变。
      

  6.   

    通过延时设置div的展开/关闭属性，基本上不消耗cpu时间（消耗一个定时器）。
      

  7.   

    我测试了一下，不需要递归查找子控件！给一个asp.net的例子（既然是asp.net板块，咱就帮大家专心于此解决之道），可以自己印证一下：yourPanel.Style["display"]="none";
    yourPanel.Style["position"]="absolute";
    //以上两个属性也可以在设计器上通过style属性设置。下面的才是关键：
    yourPanel.Attributes["onmouseover"]=
      "if(this.ttt!=undefined)clearTimeout(this.ttt);this.ttt=setTimeout('"+
      yourPanel.ClientID+".style.display=\\'inline\\'',1000)";
    yourPanel.Attributes["onmouseout"]=
      "if(this.ttt!=undefined)clearTimeout(this.ttt);this.ttt=setTimeout('"+
      yourPanel.ClientID+".style.display=\\'none\\'',1000)";
    没有任何多余的客户端预定义代码，不需要在mouse移动时进行大量计算。
    或者，对于非asp.net的程序，可以这样理解一下：<button id=button1 onclick="div1.style.display='inline'">菜单</button>
    <div id="div1" style="position:absolute;background-color: #CCCCCC;display:none" 
    onmouseover="if(this.ttt!=undefined)clearTimeout(this.ttt);this.ttt=setTimeout('div1.style.display=\'inline\'',1000);" 
    onmouseout="if(this.ttt!=undefined)clearTimeout(this.ttt);this.ttt=setTimeout('div1.style.display=\'none\'',1000);" >
    <table>
      <tr><td>1111111111</td></tr><tr><td >221111111</td>
      <td>33111111</td>
      <td>1111111111</td></tr><tr><td >221111111</td>
    </tr>
      <tr><td>1111111111</td></tr><tr><td >221111111</td>
      <td>33111111</td>
      <td>1111111111</td></tr><tr><td >221111111</td>
    </tr>
      <tr><td>1111111111</td></tr><tr><td >221111111</td>
      <td>33111111</td>
      <td>1111111111</td></tr><tr><td >221111111</td>
    </tr>
    </table></div>