jQuery中mouseenter和mouseover的区别

最新推荐文章于 2023-01-31 20:28:05 发布

杏黄的三叶草

最新推荐文章于 2023-01-31 20:28:05 发布

阅读量223

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/dwjdj/article/details/106116729

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

1.mouseover在鼠标进入父元素时会被触发，当进入父元素的子元素时又会被触发一次

2.mouseenter只有在鼠标进入目标元素时才会被触发，和其子元素无关。

案例(自己最好在编辑器上测试一下，加深理解)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.1.js"></script>
    <script>
        var x=0;
        var y=0;
        $(document).ready(function(){
            $("div.over").mouseover(function(){
                $(".over span").text(x+=1);
            });
            $("div.over").mouseout(function(){
                $(".over span").text(x+=1);
            });
            $("div.enter").mouseenter(function(){
                $(".enter span").text(y+=1);
            });
            $("div.enter").mouseleave(function(){
                $(".enter span").text(y+=1);
            });
        });
    </script>
</head>
<body>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
    <h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
    <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>
</html>