解决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时再执行方法体：?

if(!this.contains(event.fromElement)){MouseOverFunc()}?

在onmouseout时先进行如下判断，结果为true时再执行方法体：?

if(!this.contains(event.toElement)){MouseOutFunc()}?