mouseout和mouseleave的區別

mouseleave事件是各元素各自觸發，不是由子元素冒泡而來，而mouseout是由子元素冒泡而來。也就是：

mouseleave是當鼠標指針離開了目標元素以及目標元素的所有子元素以后才會觸發。如下例就是如果第二個div的高度比第三個有文本內容的div高，離開文本后鼠標還在第二個div范圍內，只會觸發有文本內容的div的mouseleave事件。

而mouseout是只要鼠標指針離開了目標元素或者目標元素的所有子元素中的任何一個就會被觸發，即使鼠標指針還在目標元素內。也就是離開子元素后，mouseout事件會冒泡到父元素上。直到取消了冒泡或者到達了最外層根元素，才會停止冒泡。

<div @mouseleave="mouse('1',$event)">
     <div @mouseleave="mouse('2',$event)">
            <div @mouseleave="mouse('3',$event)">
              三層測mouseleave
            </div>
       </div>
</div> 

 

<div @mouseout="mouse('1',$event)">
      <div @mouseout="mouse('2',$event)">
          <div @mouseout="mouse('3',$event)">
              三層測mouseout
           </div>

　　</div>

</div>

 

mouse(mark, e) {
        e.stopPropagation();
        console.log('鼠標出去了');
        console.log(mark);
}

mouseleave和mouseout共用一個處理函數。當鼠標離開文字的時候，mouseleave事件會觸發三次，打印分別為3,2,1。而mouseout事件因為在輸出3的時候，就已經阻止冒泡了，所以事件沒有冒泡出去，打印為3.