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.