解决HTML内部元素的Mouse事件干扰（实例,兼容ff,ie）

原理：

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

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

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

这可不是我想要的，那么怎么来“屏蔽”内部元素给外层元素带来的Javascript事件干扰呢？

这里列举两种方法：

一. setTimeout

因为在鼠标移动到内部元素之上而触发了外层元素的onmouseout事件后，外层元素的onmouseover也会马上触发，所以我们只需要把外层元素的onmouseout事件需要执行的动作延迟很短的一段时间来运行，然后在onmouseover事件中再执行clearTimeout方法，这样就可以避免内部元素引起的事件干扰。

具体的执行过程请看下图（纵向的虚线表示时间）：

function out(id, event)

2{

3 var parent = document.getElementById(id)

4 if(typeof(HTMLElement)!="undefined") //给firefox定义contains()方法，ie下不起作用

5 {

6 HTMLElement.prototype.contains=function(obj)

7 {

8 while(obj!=null&&typeof(obj.tagName)!="undefind"){ //通过循环对比来判断是不是obj的父元素

9 　 if(obj==this) return true;

10 　　　　 obj=obj.parentNode;

11 　　 }

12 return false;

13 };

14 }

15 if ($.browser.mozilla)

16 {

17 if (!parent.contains(event.relatedTarget)) { //如果是子元素

18 　　 $("#"+id).fadeOut(3000, function(){

19 $("#"+id+" .todaydiary_list").hide();

20 });

21 }

22 }

23 else

24 {

25 if (!parent.contains(event.toElement)) {

26 $("#"+id).fadeOut(3000, function(){

27 $("#"+id+" .todaydiary_list").hide();

28 });

29 }

30 }

31}