js中 mouseout/mouseleave事件

最新推荐文章于 2025-10-17 22:56:23 发布

原创最新推荐文章于 2025-10-17 22:56:23 发布 · 6.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文深入解析了JavaScript中的mouseover、mouseout及mouseleave事件的区别与应用。通过实例演示了这些事件如何响应鼠标悬停和移出的行为，特别是在复杂DOM结构中的表现。

js的mouseout和mouseover事件

mouseover事件
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元素才会触发。