dunhuangmi的话：记得还是生手时面过某知名公司，题目之一是两个嵌套div，鼠标走对角线经过父与子时究竟会触发几个mouseover和mouseout事件？我当时答错了
，下面这篇文章解释了这个问题。
===================================================================
描述 ：
javascript的mouseover和mouseout事件，在绑定元素内部有子元素的情况下，
经过绑定元素时会多次触发mouseover和mouseout事件。
原因 ：
当鼠标经过或离开子元素的时候，浏览器认为这样也触发了mouseover和mouseout事件
解决办法: ： 原生javascript：
(修改自jquery)
??? var handler = document.getElementById("test2");
??? handler.onmouseover = function(e){
??????????? if(checkFather(this,e)){
??????????????? console.debug("over");
??????????? }
??? }
??? handler.onmouseout = function(e){
??????????? if(checkFather(this,e)){
??????????????? console.debug("out");
??????????? }
??? }
??? function checkFather(that,e){
??????? var parent = e.relatedTarget;
???????? try {
??????????? while ( parent && parent !== that ) {
??????????????? parent = parent.parentNode;
??????????? }
??????????? return (parent !== that);
??????? } catch(e) { }
??? }
原理是判断离开的元素（mouseover时）或者进入的元素（mouseout进入的元素）是不是事件绑定对象本身或者子元素
jquery解决办法:
jquery的mouseenter和mouseleave方法已经修复了这个问题，可以直接用来替代mouseover和mouseout
不过有个mouseenter和mouseleave有个小问题是，让鼠标从文档外直接进入绑定事件的元素时，mouseenter不生效
暂时解决办法是，别让绑定事件的元素靠浏览器边缘，尽量留出至少1px间距。
另外，jquery的hover()方法,相当于使用了mouseenter和mouseleave。也能解决mouseover和mouseout的问题。
来自：http://www.zhangsuoyong.com/?p=111
?
先了解一下鼠标移动流程，鼠标放上去onmouseover下拉菜单出现，移开onmouseout则消失，从父元素到子元素流程事件触发流程应该是这样的：父onmouseover=>父onmouseout=>子onmouseover...
在
这个过程中有个javascript冒泡的问题，当从父元素移动到子元素的时候，会冒泡到父元素从而触发父元素的onmouseout事件，虽然从界面上
看鼠标并没有移出父元素。所以我们不要冒泡到父元素就行了。纯js的做法就是判断当前元素是否是子元素，是的话，就不冒泡到父元素。
你这里用到
了
jQuery的slideDown，使用mouseout时，鼠标只要在容器里一移动，就被触发了hide()，其实是因为mouseout事件也会影响
到子元素，也就是事件可能被同时绑定到了该容器的子元素上，所以鼠标移出每个子元素也都会触发我们的hide()。
jquery1.3版本还有个函数mouseleave，把mouseout换为mouseleave就解决了这个问题。
?