我正在做一个动态的菜单,也就是WEB页上有一个图片,当把鼠标移动到图片上时,紧挨着图片的下边会有一个列表框,这个列表框我是用一个绝对定位的DIV来做的。现在,我想实现当鼠标移动到图片上时,列表框出现,当鼠标从图片移动到列表框上时,列表框不会消失。但是当鼠标既不在图片上也不再列表框上时,列表框消失。。代码如下:
这是图片和列表框的HTML:<img src="images/newtopic.gif" alt="" id="imgNewTopic" onmouseover="showNewOptic(this)" onmouseout="relayTime1(event)" />
<div id="newTopicTip" onmouseout="relayTime2(event)" >
以下是他们的CSS#imgNewTopic
{
float:right;
}
#newTopicTip
{
width:120px;
height:132px;
position:absolute;
border:1px solid #CAD9EA;
clear:right;
display:none;
background-color:#FFFFFF;
}
下面是写的JS//鼠标移动到发表帖子图片上时显示DIV
function showNewOptic(oImg)
{
   var oDiv=document.getElementById("newTopicTip");
   oDiv.style.display="block";
   oDiv.style.left=oImg.offsetLeft-oDiv.offsetWidth+oImg.offsetWidth;
   oDiv.style.top=oImg.offsetHeight+oDiv.offsetHeight+oImg.offsetHeight;
}
//鼠标移出图像时DIV消失
function hideNewOptic()
{
   var oDiv=document.getElementById("newTopicTip")
   oDiv.style.display="none";
   
}
//DIV延迟一秒后消失
function relayTime1(oEvent)
{
   if(oEvent.toElement.id=="newTopicTip")
   {
//        alert("aa");
          return;
   }
   else
   {
//         alert("img");    
         setTimeout(hideNewOptic,1000);
   }
}
function relayTime2(oEvent)
{
   if(oEvent.toElement.id=="imgNewTopic")
   {
//        alert("aa");
          return;
   }
   else
   {
//         alert("div");    
         setTimeout(hideNewOptic,1000);
   }
}
现在出现问题了,当我把鼠标移动到图片上时,DIV列表框出现,这时,他们是紧挨着的,DIV子图片的正下方。。然而当我把鼠标从图片移动到DIV列表框中时。。却总是会执行DIV的onmouseout事件,不知道是什么原因,这样就导致把鼠标从图片移动到DIV上后DIV还是会消失。。忘高手解惑~~

解决方案 »

  1.   

    外面放一个div
    <div><img src="images/newtopic.gif" alt="" id="imgNewTopic" onmouseover="showNewOptic(this)" onmouseout="relayTime1(event)" />
    <div id="newTopicTip" onmouseout="relayTime2(event)" >
    </div>
    然后onmouseout事件在外面的div上监听
      

  2.   

    按你说的方法不行,列表框DIV是绝对定位的,它脱离了页面流搞不懂为什么将鼠标从图片移动到DIV列表框中时。。却总是会执行DIV的onmouseout事件
      

  3.   

    解决HTML内部元素的Mouse事件干扰 话说有一个DIV元素,其内部有一个IMG元素和SPAN元素,不用理会这两个内部元素怎么布局,这不是我要讨论的重点。 为了实现一些特殊的效果,我需要利用TD的onmouseover和onmouseout事件,测试时就会发现如下的状况: 当鼠标移入DIV内部时,onmouseover事件被触发;接着再鼠标移动到DIV内部的IMG或者SPAN元素之上,我们肯定不会认为这时鼠标已经移到了DIV的外边,但奇怪的是onmouseout事件触发了,而且紧接着onmouseover事件也马上被触发了。 这可不是我想要的,那么怎么来&ldquo;屏蔽&rdquo;内部元素给外层元素带来的Javascript事件干扰呢? 这里列举两种方法: 一. setTimeout 因为在鼠标移动到内部元素之上而触发了外层元素的onmouseout事件后,外层元素的onmouseover也会马上触发,所以我们只需要把外层元素的onmouseout事件需要执行的动作延迟很短的一段时间来运行,然后在onmouseover事件中再执行clearTimeout方法,这样就可以避免内部元素引起的事件干扰。 具体的执行过程请看下图(纵向的虚线表示时间):  
    这是个很巧妙的的方法,因为当onmouseout触发后,实质性的方法并没有马上执行,而是要等待一小段时间。如果在这段时间里马上又触发了 onmouseover事件,那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了,所以在onmouseover事件中使用 clearTimeout来阻止延时的方法执行。 二.contains 在onmouseover时先进行如下判断,结果为true时再执行方法体: 
    var s = e.fromElement || e.relatedTarget ; 
    if(!this.contains(s)){MouseOverFunc()} 在onmouseout时先进行如下判断,结果为true时再执行方法体: 
    var s = e.toElement || e.relatedTarget ;
    if(!this.contains(s)){MouseOutFunc()} 
     下面来解释一下上面两行代码的含义: 在IE中,所有的HTML元素都有一个contains方法,它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发,如果内部元素导致了不需要的事件被触发,那我们就忽略这个事件。 event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素;event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。 那么上面两行代码的含义就分别是: ○ 当触发onmouseover事件时,判断鼠标离开的元素是否是当前元素的内部元素,如果是,忽略此事件; ○ 当触发onmouseout事件时,判断鼠标进入的元素是否是当前元素的内部元素,如果是,忽略此事件; 这样,内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。 但问题又来了,非IE的浏览器并不支持contains函数,不过既然我们已经知道了contains函数的作用,就可以自行添加如下的代码来为非IE浏览器增加contains支持: if(typeof(HTMLElement) != "undefined") { HTMLElement.prototype.contains = function(obj) {             while(obj != null &&  typeof(obj.tagName) != "undefined")             { if(obj == this) return true; obj = obj.parentNode; }    return false;   };   } 
      

  4.   

    每次DiV显示的时候给Body绑定一个Click事件,jquery用binding方法可以实现
    把隐藏的事件放在Body的Click事件上,点击的时候判断是否点在Div上(可以通过DIV的Class跟Id之类的属性来判断)。。如果不是就隐藏掉,是就不隐藏。
    在隐藏的方法里再把body的这个Click事件去掉,可以用jquery的unbind事件来实现
      

  5.   

    不见意你采用这种结构来做,最好是在外面还包个层或别的
    例:
    <ul id="navMenu">
         <li><a href="javascript://" class="e">ddddddd</a>
                    <dl>
                        <dd><a href="">22222</a></dd>
                    </dl>
         </li>
    </ul>function A() {
                var ob = document.getElementById('navMenu');
                var m = ob.getElementsByTagName('li');
                for (var i = 0; i < m.length; i++) {
                    var e = m[i];
                    e.onmouseover = function () {
                        for (var k = 0; k < m.length; k++) {
                            m[k].className = m[k] == this ? "e" : "";
                            var a = m[k].getElementsByTagName('dl')[0];
                            if (a) a.style.display = m[k] == this ? "block" : "none"
                        }
                        clearTimeout(this.timer);
                    };
                    e.onmouseout = (function (b) {
                        return function () {
                            this.timer = setTimeout(function () {
                                var a = b.getElementsByTagName('dl')[0];
                                if (a) a.style.display = "none"
                            }, 100);
                        }
                    })(e);
                }
            };
      

  6.   

    确实如四楼所说,是由于DIV内部的P标签的干扰。。导致将鼠标移动到DIV内部时先触发了它的onmouseout事件,当我把P标签移除,仅仅用文字代替时就不会出现这个问题可是造成这个问题的原理是什么呢?
      

  7.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>菜单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
    #main{
    width: 500px;
    background-color: black;
    height: 300px;
    }#head{
    background-color: white;
    text-align: center;
    font-size: 14px;
    width: 100px;
    }
    #menu{
    background-color: white;
    text-align: center;
    font-size: 14px;
    width: 100px;
    border: 1px red solid;
    display: none;
    }
    </style>
    </head>
    <body>
    <div id = "main">
    <!-- 菜单名称 -->
    <div id = "head" onmousemove="showMenu()" onmouseout="hidMenu()">鼠标移上来</div>
    <div id = "menu" onmousemove="showMenu()" onmouseout="hidMenu()">
    <a href="#">111111111111</a>
    <a href="#">222222222222</a>
    </div>
    </div>
    <script type="text/javascript" language="JavaScript">
    function showMenu(){
    document.getElementById('menu').style.display = "block";
    }
    function hidMenu(){
    document.getElementById('menu').style.display = "none";
    }
    </script>
    </body>
    </html>