其实在w3c上就有明确的说明。
mouseout:不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
mouseleave: 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
根据你的业务场景，正确使用api。
附一个伸缩导航栏的实现
需求：1.鼠标触及顶端显示导航栏，移开不显示。（移开后如何找到触发点？使用透明的padding来隐藏触发区域。）
2.显示和隐藏，只有在移开和移入nav的时候才触发，注意性能。（原本想利用事件捕获，后来发现没必要，用mouseleave就行。可见正确用api的重要性。）
css
body{ margin:0 }
li{ display: inline-block;padding: 10px 20px;list-style: none; cursor: pointer;}
li:hover{ background-color: #ccc}
ul{background: #eee;display: inline-block;width: 100%;margin: 0px;}
#nav{background:transparent;padding-bottom: 10px;}/*一般不要用id来写样式，我只是写个demo所以这些细节就随便一些*/
b{margin: 0 20px;}
.show{
margin: 0px;
transition: margin 0.2s;
}
.hide{
margin-top:-40px;
transition: margin 0.2s;
}
html
<section id="contain">
<nav id="nav" class="hide">
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
</nav>
</section>
js
var contain = document.getElementById("contain");
var nav = document.getElementById("nav");
contain.onmouseover=function(e){
if(e.target.tagName=="NAV"){
if(nav.getAttribute("class")==="hide"){
nav.setAttribute("class","show");
}
}
}
//如果使用mouseout，移到li标签就会触发nav的mouseout事件
contain.onmouseleave=function(e){
if(e.target.tagName=="NAV"){
if(nav.getAttribute("class")==="show"){
nav.setAttribute("class","hide");
}
}
}
