我正在做一个动态的菜单,也就是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还是会消失。。忘高手解惑~~
这是图片和列表框的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还是会消失。。忘高手解惑~~
解决方案 »
- 这句话在插件中有什么作用?var plugin = $.editable.types[settings.type].plugin || function ()
- 【求助】JavaScript如何让PNG图片在IE6下面透明
- select onchange的问题,怎么不起作用?
- div嵌套div,onmouseout事件怎样判断鼠标离开最外面的div的那块区域
- 请教关于网站统计的js,求大家帮忙,谢谢
- MzTreeView问题:怎样一次关闭所有节点?
- 问一个关于request的问题
- 如何控制submit的宽度
- jquery datatable checkbox问题
- 求助,初学者
- javascript 回调函数返回值
- 《JS精粹》一书里不理解的套用部分
<div><img src="images/newtopic.gif" alt="" id="imgNewTopic" onmouseover="showNewOptic(this)" onmouseout="relayTime1(event)" />
<div id="newTopicTip" onmouseout="relayTime2(event)" >
</div>
然后onmouseout事件在外面的div上监听
这是个很巧妙的的方法,因为当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; }; }
把隐藏的事件放在Body的Click事件上,点击的时候判断是否点在Div上(可以通过DIV的Class跟Id之类的属性来判断)。。如果不是就隐藏掉,是就不隐藏。
在隐藏的方法里再把body的这个Click事件去掉,可以用jquery的unbind事件来实现
例:
<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);
}
};
<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>