我们经常会遇到一个问题，我们使用onmouseover和onmouseout控制鼠标的的移入移出时，如果是将鼠标从父级移动到子级的时候，会触发子级的冒泡事件，导致父级先触发移出事件后立即触发移入事件，在IE下效果不是特别好，那我这里有两种解决办法

1、利用js解决：其实就是将onmouseover和onmouseout用onmouseenter和onmouseleave来替代，我们知道与over和呕吐不同的是enter和leave，子级不会影响父级，所以自然也就解决了上面的问题

但这两个方法有兼容性问题：在IE下基本都支持，但在老版本的Chrome和Opera下不支持，而且处理兼容性也比较麻烦，所以，在使用的时候，要根据情况而定

2、利用css处理，其实很简单，就是加一个层（透明层，和父级大小一样），这个没有兼容性问题，只是可能会多一些闲置的代码，不过这种方法还是比较简单的

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);

}

补充知识：

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；