解决HTML元素的Mouse事件被内部元素的干扰_html/css_WEB-ITnose

有一个DIV元素，其内部SPAN元素， 为了实现一些特殊的效果，我需要利用DIV元素的onmouseover和onmouseout事件，测试时就会发现如下的状况：
当鼠标移入DIV内部时，onmouseover事件被触发；接着再鼠标移动到DIV内部SPAN元素之上，我们肯定不会认为这时鼠标已经移到了DIV的外边，但奇怪的是DIV元素的onmouseout事件触发了，而且紧接着DIV元素onmouseover事件也马上被触发了。
这可不是我想要的，那么怎么来“屏蔽”内部元素给外层元素带来的Javascript事件干扰呢？
这里列举两种方法：

一. setTimeout

二.contains

if(this.contains(event.fromElement)){return;}

同样在onmouseout调用的方法中也加入如下判断，结果为假时再执行方法体：

if(this.contains(event.toElement)){return;}

下面来解释一下上面两行代码的含义：在IE中，所有的HTML元素都有一个contains方法，它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发，如果内部元素导致了不需要的事件被触发，那我们就忽略这个事件。

event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素；event.toElement指向触发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;       };   }