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

来源：互联网发布：好吃的泡面知乎编辑：程序博客网时间：2024/05/07 12:29

问题：

我正在做一个动态的菜单，也就是WEB页上有一个图片，当把鼠标移动到图片上时，紧挨着图片的下边会有一个列表框，这个列表框我是用一个绝对定位的DIV来做的。现在，我想实现当鼠标移动到图片上时，列表框出现，当鼠标从图片移动到列表框上时，列表框不会消失。但是当鼠标既不在图片上也不再列表框上时，列表框消失。。代码如下：
这是图片和列表框的HTML：<img src="images/newtopic.gif" mce_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
//鼠标移动到发表帖子图片上时显示DIVfunction 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还是会消失。。忘高手解惑~~

解答：

话说有一个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时再执行方法体：
if(!this.contains(event.fromElement)){MouseOverFunc()}
在onmouseout时先进行如下判断，结果为true时再执行方法体：
if(!this.contains(event.toElement)){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) != "undefind") {if(obj == this)Return true;Obj = obj.parentNode;} return false; }; }

就上面遇到的问题而言，不能用第一种方法，因为我在DIV的onmouseout事件中要条用event对象，而如果用延迟函数setTimeout,将访问不到event对象。因此本采用第二种解决方案。

具体代码如下：

HTML：

CSS:

#imgNewTopic{float:right;}#newTopicTip{width:120px;height:132px;position:absolute;border:1px solid #CAD9EA;clear:right;display:none;background-color:#FFFFFF;text-align:center;font-size:13px;}#newTopicTip hr{margin-left:10px;margin-right:10px;margin-top:8px;color:#E8E8E8;}#newTopicTip p{margin-top:8px;}#newTopicTip .pHeader{margin-top:18px;}#newTopicTip a:link{color:#000000;text-decoration:none;}#newTopicTip a:hover{color:#003399;}#newTopicTip a:visited{text-decoration:none;}

JS:

//鼠标移动到发表帖子图片上时显示DIVfunction 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(oEvent.toElement.id); setTimeout(hideNewOptic,1000); }}function relayonmouseout(oDiv){// inervalID=setTimeout(relayTime2,1000); if(!oDiv.contains(event.toElement)) { if(event.toElement.id=="imgNewTopic") { return; } else {// alert("div"); setTimeout(hideNewOptic,1000); } }}

在此，此问题得到解决~

本文的两个解决办法转载CSDN博客：http://blog.csdn.net/sallay/archive/2008/11/12/3280170.aspx，在此感谢~