js中 mouseout/mouseleave事件

mouseover事件

mouseover在鼠标停留在某个元素时触发，有点类似与hover

mouseout和mouseleave事件

   mouseout 与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

例子

  <div class="header-right">
        <a i18n="myOrder_person" id="private_person" class="private_person" onmouseover="personCenter_show()" >個人中心</a>
        <ul id="private_person_list" onmouseleave="personCenter_hide()" >
            <li i18n="myOrder_order">我的訂單</li>
            <li i18n="myOrder_interests">我的權益</li>
        </ul>
   </div>

样式如下：

当鼠标经过俩个< li >元素的中间间隔时，无论时mouseout,还是mouseleave都是会被触发的，因为已经离开了事件指向的元素！
我们可以将< li >元素的中间空隙用border填充，使用mouseleave事件，则可以在ul列表中停留，不会触发mouseleave事件，只有当鼠标离开了ul元素才会触发。