onmouseover 和onmouseout的闪烁问题

在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;
};

}

用jQuery可以很好的实现你想要的这种效果：

 
 
 
 
 

        #shadow{
            width: 518px;
            height: 100px;
            background: #abc;
            position: relative;
            margin-top: -27px;
        }
        #shadow span{
            display: inline-block;
            padding-top: 2px;
            color: #ffffff;
        }
        
    

 
 
 
        
            Free!-Eternal Summer-
           第08话，极影字幕组