引用自 http://lishuaishuai.iteye.com/blog/2338341
在Javascript中，父元素包含子元素，当给父元素设置onmouseover或onmouseout事件时，鼠标从父级移入子级的时候会多次触发onmouseover事件；鼠标从子级移入父级后再次移出的时候也会多次触发onmouseout事件。所以这个问题要解决，不然在以后的事例中出现很大的问题。
下面我们首先要熟悉几个对象与方法：
1）事件对象：
2）事件对象相关属性(只针对onmouseover与onmouseout):
标签源：oEvent.fromElement(从哪里来的元素)：兼容IE,Chrome
oEvent.toElement(去哪里的元素)：兼容IE,Chrome
oEvent.relateTarget(相关元素)：兼容FF
3）判断一个元素是不是包含在另一个元素中的方法：元素.contains(Node)
解决方法
1.mouseenter与mouseleave事件来代替onmouseover与onmouseout事件。
这个原文提到兼容问题，但我在Jquery中查到有mouseenter与mouseleave事件。所以我就用了Jquery的mouseenter来代替，亲测IE8，FF，Chrome都用。
2.//------------------------------------------------------------
function contains(parentNode, childNode)
{
if (parentNode.contains) {
return parentNode != childNode && parentNode.contains(childNode);
} else {
return !!(parentNode.compareDocumentPosition(childNode) & 16);
}
}
function checkHover(e,target)
{
if (getEvent(e).type=="mouseover") {
return !contains(target,getEvent(e).relatedTarget||getEvent(e).fromElement) && !((getEvent(e).relatedTarget||getEvent(e).fromElement)===target);
} else {
return !contains(target,getEvent(e).relatedTarget||getEvent(e).toElement) && !((getEvent(e).relatedTarget||getEvent(e).toElement)===target);
}
}
function getEvent(e){
return e||window.event;
}
//把以上代码copy,然后在onmouseover="abc(event,this)"
function abc(e, obj)
{
if(checkHover(e,obj)){
//..这里写你要做的事情即可。
}
}