鼠标事件-mouseenter和mouseleave-与over、out的区别-前端-Javascript-书闪BookChips

120 - 鼠标事件 - mouseenter 和 mouseleave - 与 over、out 的区别

作者：

贺及楼

成为作者

更新日期：2025-02-21 19:56:38

鼠标事件 - mouseenter 和 mouseleave - 与 over、out 的区别

在前端开发中，处理鼠标事件是常见的需求。mouseenter、mouseleave、mouseover 和 mouseout 这四个鼠标事件看起来很相似，但它们之间存在着一些关键的区别。了解这些区别对于正确处理鼠标交互至关重要。本文将详细介绍这四个事件，并通过实例说明它们之间的差异。

基本概念

1. `mouseover` 和 `mouseout`

mouseover：当鼠标指针移动到元素或其子元素上时触发该事件。也就是说，即使鼠标进入元素的子元素，mouseover 事件也会在父元素上触发。
mouseout：当鼠标指针从元素或其子元素移出时触发该事件。同样，当鼠标从子元素移出到父元素内或者完全移出父元素时，mouseout 事件都会触发。

2. `mouseenter` 和 `mouseleave`

mouseenter：只有当鼠标指针直接进入元素本身（不包括子元素）时才会触发该事件。如果鼠标从子元素进入父元素，不会再次触发 mouseenter 事件。
mouseleave：只有当鼠标指针直接离开元素本身（不包括子元素）时才会触发该事件。如果鼠标在元素的子元素之间移动，不会触发 mouseleave 事件。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Events</title>
    <style>
        #parent {
            width: 300px;
            height: 300px;
            background-color: lightblue;
            padding: 20px;
        }
        #child {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>
    <script>
        const parent = document.getElementById('parent');
        const child = document.getElementById('child');
        // mouseover 和 mouseout 示例
        parent.addEventListener('mouseover', () => {
            console.log('mouseover on parent');
        });
        parent.addEventListener('mouseout', () => {
            console.log('mouseout from parent');
        });
        // mouseenter 和 mouseleave 示例
        parent.addEventListener('mouseenter', () => {
            console.log('mouseenter on parent');
        });
        parent.addEventListener('mouseleave', () => {
            console.log('mouseleave from parent');
        });
    </script>
</body>
</html>

代码解释

上述代码创建了一个父元素 parent 和一个子元素 child。
分别为父元素添加了 mouseover、mouseout、mouseenter 和 mouseleave 事件监听器。
当你将鼠标移入父元素时，mouseover 和 mouseenter 事件都会触发。但当你将鼠标从父元素移入子元素时，mouseover 事件会再次触发，而 mouseenter 事件不会。
当你将鼠标从子元素移出到父元素内时，mouseout 事件会触发，而 mouseleave 事件不会。只有当鼠标完全移出父元素时，mouseleave 事件才会触发。

区别总结

事件名称	触发条件	是否冒泡	适用场景
`mouseover`	鼠标进入元素或其子元素	是	需要处理鼠标进入元素及其子元素的情况，如菜单展开效果
`mouseout`	鼠标离开元素或其子元素	是	需要处理鼠标离开元素及其子元素的情况，如菜单收起效果
`mouseenter`	鼠标直接进入元素本身	否	只需要处理鼠标进入元素本身的情况，如鼠标悬停高亮效果
`mouseleave`	鼠标直接离开元素本身	否	只需要处理鼠标离开元素本身的情况，如鼠标移开取消高亮效果

结论

mouseenter 和 mouseleave 事件更加精确，只关注元素本身的鼠标进出情况，不考虑子元素的影响。而 mouseover 和 mouseout 事件会在鼠标进入或离开子元素时触发，适用于需要处理子元素交互的场景。在实际开发中，根据具体需求选择合适的鼠标事件可以提高代码的准确性和性能。

希望通过本文的介绍，你对 mouseenter、mouseleave、mouseover 和 mouseout 这四个鼠标事件的区别有了更清晰的认识。在处理鼠标交互时，合理运用这些事件可以让你的网页更加流畅和易用。