mouseenter（mouseleave）与 mouseover（mouseout）的区别

厨樱

已于 2023-04-12 17:44:01 修改

阅读量257

点赞数 1

分类专栏：前端文章标签： css html vue.js

于 2023-04-12 16:48:53 首次发布

原文链接：https://blog.csdn.net/qq_37384271/article/details/114222808

版权

前端专栏收录该内容

46 篇文章 5 订阅

订阅专栏

遇到的问题

在父元素上定义了mouseover和mouseout事件，子元素也会触发父元素上的事件，添加stop修饰符、self修饰符（@mouseover.stop.self）均不起作用，子元素较多，会触发太多次事件。后改为mouseenter和mouseleave事件，问题解决。

问题原因

从表象上讲，mouseenter（mouseleave）只会在元素本身触发，不会在子元素触发；mouseover（mouseout）不仅会在元素本身触发，还会在子元素触发。
从原理上讲，当指针设备（通常为鼠标）移动到（离开）绑有事件监听器的元素上时，mouseenter（mouseleave）事件会被触发，和 mouseover（mouseout）事件类似，但不同的是 mouseenter（mouseleave）不会冒泡，并且当鼠标从它的子元素移动它自身元素时，不会触发 mouseenter（从自身元素离开到子元素时，也不会触发mouseleave）。而对于 mouseover（mouseout），它会从触发节点找到 DOM 树中最深层的元素，然后从这个元素开始向上传递上去，直到被组织冒泡或达到根节点。
注意：mouseover（mouseout）比 mouseenter（mouseleave）先触发。
补充：mousemove：鼠标在元素上移动时触发，在子元素上移动时也会触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mouse event</title>
</head>
<body>
    <div class="a">A
        <div class="b"
            onmouseenter="mouseenter()"
            onmouseleave="mouseleave()"
            onmouseover="mouseover()"
            onmouseout="mouseout()"
            onmousemove="mousemove()"
        >B
            <div class="c">C</div>
        </div>
    </div>
    <script>
        const mouseenter = () => {
            console.log("mouseenter...");
        }
        const mouseleave = () => {
            console.log("mouseleave...");
        }
        const mouseover = () => {
            console.log("mouseover...");
        }
        const mouseout = () => {
            console.log("mouseout...");
        }
        const mousemove = () => {
            console.log("mousemove...");
        }
    </script>
    <style>
        .a {
            height: 500px;
            width: 500px;
            background-color: aqua;
        }
        .b {
            height: 300px;
            width: 300px;
            background-color: burlywood;
        }
        .c {
            height: 150px;
            width: 150px;
            background-color: darkcyan;
        }
    </style>
</body>
</html>