其實在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");
}
}
}
