jquery中mouseover和mouseout以及mouseenter和mouseleave的区别

最近在开发菜单的时候遇到了js问题。项目要求，用户通过鼠标放上就展开菜单，移开就关闭菜单，起初，我采用mouseover、mouseout事件实施，在ie高版本例如ie11以及火狐等浏览器下都能正常的展示菜单，但是在ie8上，发现了抖动的情况，放上去的菜单一会儿产展开一会儿又关闭，不停闪烁。

经过仔细检查，发现菜单的子元素img标签虽然在菜单元素li里，但是当鼠标放在img图片上时却触发了mouseout事件，移开img则又一次触发mouseover事件。

代码示例大概如下

<li class="optn"><a>综合查询</a><img src="icon.png"/></li>

jquery:

$("optn").live("mouseover",function(){......}) .live("mouseout",function(){....})// 采用live是因为菜单dom对象动态创建在页面上的，不是直接编写在页面里

通过以上的代码发现，当触发mouseover时，在其<li>标签内部的<a>和<img>都会再次触发鼠标的mouseover和mouseout事件

强大的百度后，发现可以改成采用mouseenter和mouseleave事件，于是仔细阅读了一下这几个事件的区别才恍然大悟！我只想说，有的时候还是要仔细的阅读api文档

w3c注释：“mouseover 与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件，而mouseenter只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。mouseout和mouseleave也是一样，因此在有子元素的情况下应该采用mouseenter和mouseleave比较合适。”

工作完成，收工！