JavaScript 中 mouseenter 与mouseover 区别

~夏秋～

已于 2022-11-23 23:13:42 修改

阅读量158

点赞数

分类专栏： JavaScript 文章标签： css html 前端

于 2022-11-23 23:12:34 首次发布

本文链接：https://blog.csdn.net/qq_53414724/article/details/128009682

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

mouseenter 与mouseover 区别

mouseenter与mouseover有什么不同，也许可以从两方面去讲。

看他们是是否支持冒泡或者是否为事件的触发时机；

只有当鼠标指针在对象的边界之外，用户把鼠标移动到对象的边界内时，事件mouseenter才触发。

如果鼠标当时正在边界内，用户想要触发该事件，需要把鼠标移动到对象边界外再移动到边界内。
因此，mouseenter不支持事件冒泡，所以导致在一个元素的子元素上进入或离开的时候会触发其mouseover和mouseout事件，但是却不会触发mouseenter和mouseleave事件。

图示：

演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.3.1.js"></script>
    <style>
        div{
            width: 200px;
            height: 160px;
            float: left;
            border: 1px solid hotpink;
            margin: 10px 10px;
        }
    </style>
</head>
<body>
<script>
    $(function () {
        let tep1=0;
        let tep2=0;
        $("#dv1>p").mouseover(function () {
            $(tep1+=1);
            $("#dv1>p").text(tep1);
        });
        $("#dv1").mouseover(function () {
            $(tep1+=1);
            $("#dv1>p").text(tep1);
        });

        $("#dv2>p").mouseenter(function () {
            $(tep2+=1);
            $("#dv2>p").text(tep2);
        });
        $("#dv2").mouseenter(function () {
            $(tep2+=1);
            $("#dv2>p").text(tep2);
        });
    });
</script>
<div id="dv1"><p style="background-color: pink;">()</p></div>
<div id="dv2"><p style="background-color: pink;">()</p></div>
</body>
</html>