mouseout和mouseleave的区别

mouseleave事件是各元素各自触发，不是由子元素冒泡而来，而mouseout是由子元素冒泡而来。

举个栗子

.app1 {
  width: 300px;
  height: 300px;
  border: 1px dashed black;
}
.app2 {
  width: 200px;
  height: 200px;
  border: 1px dashed gray;
  }
.app3 {
  width: 100px;
  height: 100px;
  border: 1px dashed lightgray;
}
/* 我把鼠标起点放在最里层 div 里往外移动到最外层 div 之外 */
//上述一整个过程 onmouseleave 只会会打印一次
//而 onmouseout 会打印三次，三层 div 由于子元素冒泡，导致打印事件发生了3次
<div class="app1" onmouseleave="console.log('leave')">
  <div class="app2">
    <div class="app3"></div>
  </div>
</div>