关于div的onMouseOver和onMouseOut的问题

zhongzuo1981 2011-03-02 04:32:31

页面代码
<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE></TITLE>
<script type="text/javascript">//导航
var stepover1=1;
var yPosover1=0;
var yPosout1;
var out1id;
function over1(){
Layer2.style.top=yPosover1
if(yPosover1>-20){
yPosover1=yPosover1-stepover1;
setTimeout("over1()",60);
clearTimeout(out1id);
}else{
clearTimeout(out1id);
yPosout1=yPosover1
}
}

function out1(){
out1id=setTimeout("out2()",10);
}

function out2(){
Layer2.style.top=yPosout1
if(yPosout1<0){
yPosout1=yPosout1+stepover1;
setTimeout("out2()",60);
}else{
yPosover1=yPosout1
}
}
</script>
</HEAD>
<BODY leftmargin="0" topmargin="100" marginwidth="0" marginheight="0" style="background-color:#7fa618;" oncontextmenu=self.event.returnValue=false onselectstart="return false">
<table width="778" border="1" cellspacing="0" cellpadding="0" align="center" height="600">
<tr id="yindao" style= "cursor:hand;" >
<td colspan="2" valign="top" align="center" style="position:relative;top:0;left:0;" width="60%">
<div id="Layer2" style="position:absolute; top:0;left:0;width:100%; height:50; z-index:2; border: 1px none #000000;" onMouseOver="over1()" onMouseOut="out1()">
<table width="100%" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td colspan="6" height="20" align="center" valign="middle">导航</td>
</tr>
<tr>
<td align="center">首页</td>
<td align="center">栏目一</td>
<td align="center">栏目二</td>
<td align="center">栏目三</td>
<td align="center">栏目四</td>
<td align="center">栏目五</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</BODY>
</HTML>

鼠标进入导航栏，导航栏上移，鼠标移出导航栏，导航栏下移。
问题是：鼠标快速通过导航栏，并不在里面停留，那么导航栏只上移，如何在快速通过时，使其下移归位？

...全文

259 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

hch126163 2011-03-02

打赏
举报

解决HTML内部元素的Mouse事件干扰

解决HTML内部元素的Mouse事件干扰

话说有一个DIV元素，其内部有一个IMG元素和SPAN元素，不用理会这两个内部元素怎么布局，这不是我要讨论的重点。

为了实现一些特殊的效果，我需要利用TD的onmouseover和onmouseout事件，测试时就会发现如下的状况：

当鼠标移入DIV内部时，onmouseover事件被触发；接着再鼠标移动到DIV内部的IMG或者SPAN元素之上，我们肯定不会认为这时鼠标已经移到了DIV的外边，但奇怪的是onmouseout事件触发了，而且紧接着onmouseover事件也马上被触发了。

这可不是我想要的，那么怎么来“屏蔽”内部元素给外层元素带来的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;

};

}