我们经常会遇到一个问题，我们使用onmouseover和onmouseout控制鼠标的的移入移出时，如果是将鼠标从父级移动到子级的时候，会触发子级的冒泡事件，导致父级先触发移出事件后立即触发移入事件，在IE下效果不是特别好，那我这里有两种解决办法
1、利用js解决：其实就是将onmouseover和onmouseout用onmouseenter和onmouseleave来替代，我们知道与over和呕吐不同的是enter和leave，子级不会影响父级，所以自然也就解决了上面的问题
但这两个方法有兼容性问题：在IE下基本都支持，但在老版本的Chrome和Opera下不支持，而且处理兼容性也比较麻烦，所以，在使用的时候，要根据情况而定
2、利用css处理，其实很简单，就是加一个层（透明层，和父级大小一样），这个没有兼容性问题，只是可能会多一些闲置的代码，不过这种方法还是比较简单的
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:200px; height:200px; background:red;}
#div2{ width:100px; height:100px; background:yellow;}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
oDiv1.onmouseover = function(ev){
var ev = ev || window.event;
var a = this, b = ev.relatedTarget;
//console.log(a.innerHTML);
//console.log(b.innerHTML);
if( !elContains(a,b) && a!=b ){
document.title += '1';
}
};
oDiv1.onmouseout = function(ev){
var ev = ev || window.event;
var a = this, b = ev.relatedTarget;
if(!elContains(a,b) && a!=b){
document.title += '2';
}
};
};
function elContains(a, b){ //判断两个元素是否是嵌套关系
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
补充知识：
a，b为节点
1、a.contains(b)
如果a包含b，返回true；否则返回false；a包含a同样返回true（不兼容火狐）
2、 a.compareDocumentPosition(b) 兼容火狐
a在b之后返回2；
a在b之前返回4；
a被b包含返回8；
a包含b返回16；
a包含a返回0；
3、ev.relatedTarget
返回事件的目标节点相关的节点;
对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。
对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。（IE9以下不兼容）
但IE7/8下有ev.toElement和ev.fromElement;
mouseover事件对应ev.fromElement
mouseout事件对应ev.toElement
接下来开始解决问题：
假设a是父级；b是与事件关联的节点：
解决原因1：
方法（1）a包含b返回true，a包含a返回true；
方法（2）a移出b（mouseout）返回4+16即返回20；a移入a（mouseover）返回0；
解决原因2：
方法（1）a包含a返回true，a包含b返回true
方法（2）a移出a返回0，b移入a返回4+16即返回20；