其實(shí)在w3c上就有明確的說明。

mouseout:不論鼠標(biāo)指針離開被選元素還是任何子元素，都會(huì)觸發(fā) mouseout 事件。
mouseleave: 只有在鼠標(biāo)指針離開被選元素時(shí)，才會(huì)觸發(fā) mouseleave 事件。

根據(jù)你的業(yè)務(wù)場景，正確使用api。

附一個(gè)伸縮導(dǎo)航欄的實(shí)現(xiàn)
需求：1.鼠標(biāo)觸及頂端顯示導(dǎo)航欄，移開不顯示。（移開后如何找到觸發(fā)點(diǎn)？使用透明的padding來隱藏觸發(fā)區(qū)域。）
2.顯示和隱藏，只有在移開和移入nav的時(shí)候才觸發(fā)，注意性能。（原本想利用事件捕獲，后來發(fā)現(xiàn)沒必要，用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來寫樣式，我只是寫個(gè)demo所以這些細(xì)節(jié)就隨便一些*/
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>標(biāo)題1</li>
          <li>標(biāo)題2</li>
          <li>標(biāo)題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標(biāo)簽就會(huì)觸發(fā)nav的mouseout事件
contain.onmouseleave=function(e){
       if(e.target.tagName=="NAV"){
          if(nav.getAttribute("class")==="show"){
            nav.setAttribute("class","hide");
          }
      }
    }