非IE浏览器增加 contains 方法:

[code lang=”js” highlight=””]
if (typeof (HTMLElement) != “undefined”) {
HTMLElement.prototype.contains = function (element) {
while (!!(element && element.nodeType == 1)) {
if (element== this) return true;
element= element.parentNode;
}
return false;
}
}
[/code]

在 mouseover 事件执行时先进行如下判断,结果为 true 时再执行方法体:

[code lang=”js” highlight=””]
var element = e.fromeElement || e.relatedTarget; //此处 e 为 mouseover event 事件对象;
if (!this.contains(element)) mouseOverFunc();
[/code]

在 mouseout 事件执行时先进行如下判断,结果为 true 时再执行方法体:

[code lang=”js” highlight=””]
var element = e.toElement || e.relatedTarget; //此处 e 为 mouseover event 事件对象;
if (!this.contains(element)) mouseOutFunc();
[/code]

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

event.fromElement 指向触发 onmouseover 和 onmouseout 事件时鼠标离开的元素;

event.toElement 指向触发 onmouseover 和 onmouseout 事件时鼠标进入的元素。

那么上面两行代码的含义就分别是:

当触发onmouseover事件时,判断鼠标离开的元素是否是当前元素的内部元素,如果是,忽略此事件;

当触发onmouseout事件时,判断鼠标进入的元素是否是当前元素的内部元素,如果是,忽略此事件;

这样,内部元素就不会干扰外层元素的 onmouseover 和 onmouseout 事件了。