高手帮忙啊 js显示隐藏层onmouseout事件的时候不知道为什么层不停的抖动

<html>
<head>
<title>无标题文档</title>
<script language="JavaScript1.2" type="text/javascript">
  function opTab(event) {
  var mnu = document.getElementById("menubar");
  var arrdiv = document.getElementById("arrow");
  var arrtxt = document.getElementById("arr");  var mnu2 = document.getElementById("menubar2");
  var arrdiv2 = document.getElementById("arrow2");
  var arrtxt2 = document.getElementById("arr2");
  if ((mnu.style.display != "block") || (mnu.style.display == "")) {
  mnu.style.display = "block";
  arrdiv.style.left = mnu.offsetWidth + "px";  mnu2.style.display = "block";
  mnu2.style.width = "750px";
  arrdiv2.style.left = "220px";
  arrdiv2.style.top = "160px";
  arrdiv2.style.width = "750px";
  }   
  event.cancelBubble = true;
  }
  function func() {
  document.getElementById("menubar").style.display = "none";
  document.getElementById("arrow").style.left = "0px";
  document.getElementById("menubar2").style.display = "none";
  document.getElementById("arrow2").style.left = "0px";
  document.getElementById("arrow2").style.width = "970px";
  document.getElementById("arrow2").style.left = "0px";
  document.getElementById("arrow2").style.top = "0px";
  }
  function outM(event) {
  setInterval("func()", 4000);
  }
  </script>
  <style type="text/css">
  #menubar
  {
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;
  background-color: #7C6F57;
  font-weight: 700;
  z-index: 5;
  background-repeat: repeat-y;
  }
  .pulltab
  {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 600px;
  width: 10px;
  font-size: 10px;
  z-index: 5;
  background-color: #666;
  }
  #menubar2
  {
  position: absolute;
  top: 0px;
  left: 220px;
  display: none;
  background-color: #EDF6FF;
  font-weight: 700;
  z-index: 5;
  background-repeat: repeat-y;
  border: solid 1px #AABCE0;
  }
  .pulltab2
  {
  background-color: #666666;
  height: 10px;
  left: 10px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 5;
  }
  </style>
</head>
<body>
  <div id="nav">
  <div id="menubar" style="height: 100%; width: 210px" onmouseout="outM(event)">
  </div>
  <div id="menubar2" style="width: 960px; height: 160px" onmouseout="outM(event)">
  </div>
  </div>
  <div id="navb">
  <div id="arrow" class="pulltab" onmouseover="opTab(event)">
  </div>
  <div id="arrow2" class="pulltab2" onmouseover="opTab(event)">
  </div>
  </div>
  <div style="position: absolute; left: 10px; top: 10px; z-index:0;">
主体部分
  </div>
</body>
</html>

解决方案 »

  1.   

    arrow和menubar以及menubar2和arrow2 在区域上有重复交叉的位置，所以当鼠标移上去的时候会存在问题，也就是闪，因为js不知道调用哪个mouseover 有时可能调用这个但是那个也调用了
      

  2.   

    俺知道的有两种办法：
    你可以在事件响应后，判断一下事件源是不是你要的target即可
    另外，好像ajax里面在处理事件时由一个方法可以event蔓延的 
    qq：370407106
      

  3.   

    你测试时使用的是FireFox吧？如果是，应该是无法正确定位层所引起的，下面的方法能解决，希望有用。
    function $(id){return document.getElementById(id); }
    function onmouseout_start(theEvent, controlId) {
            if (theEvent) {
                var browser = navigator.userAgent;   //取得浏览器属性
                if (browser.indexOf("Firefox") > 0) {  //如果是Firefox
                    if ($(controlId).compareDocumentPosition(theEvent.relatedTarget)) {  //如果是子元素
                        return;   //结束函式
                    }
                }
                if (browser.indexOf("MSIE") > 0) {  //如果是IE
                    if ($(controlId).contains(theEvent.toElement)) {  //如果是子元素
                        return;  //结束函式
                    }
                }
            onmouseout 时执行的Function
        }
    }
      

  4.   

    IE和FF都闪    刚才试了onmouseout_start(theEvent, controlId)方法还是不行
    郁闷啊