如何避免鼠标移入子级触发父级的移出事件（两种方法）
我们经常会遇到一个问题，我们使用onmouseover和onmouseout控制鼠标的的移入移出时，如果是将鼠标从父级移动到子级的时候，会触发子级的冒泡事件，导致父级先触发移出事件后立即触发移入事件，在IE下效果不是特别好，那我这里有两种解决办法
1、利用js解决：其实就是将onmouseover和onmouseout用onmouseenter和onmouseleave来替代，我们知道与over和呕吐不同的是enter和leave，子级不会影响父级，所以自然也就解决了上面的问题
但这两个方法有兼容性问题：在IE下基本都支持，但在老版本的Chrome和Opera下不支持，而且处理兼容性也比较麻烦，所以，在使用的时候，要根据情况而定
2、利用css处理，其实很简单，就是加一个层（透明层，和父级大小一样），这个没有兼容性问题，只是可能会多一些闲置的代码，不过这种方法还是比较简单的
无标题文档
补充知识：
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；