jQuery事件方法mouseover与mouseenter的差别

最新推荐文章于 2022-11-13 19:29:10 发布

Zayn17

最新推荐文章于 2022-11-13 19:29:10 发布

阅读量153

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43867927/article/details/101643342

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

mouseenter(): 事件只有在鼠标指针进入被选元素时被触发

mouseover(): 事件在鼠标指针进入被选元素或任意子元素时都会被触发

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h3,h4,h5{
            text-align: center;
        }

    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
        var x = 0;
        var y = 0;
        $(function () {
            $("#over").mouseover(function () {
                $("#over h5").text("次数：" + (x+=1));
            });
            $("#enter").mouseenter(function () {
                $("#enter h5").text("次数：" + (y+=1));
            })
        });

    </script>
</head>
<body>
<h3>mouseover事件， 事件在鼠标指针进入被选元素或任意子元素时都会被触发</h3>
<div id="over">
    <h4 style="background-color: aquamarine">触发mouseover事件</h4>
    <h4 style="background-color: #fffb9a">我是movseover的子代</h4>
    <h5>次数：0</h5>
</div>
<h3>mouseenter(): 事件只有在鼠标指针进入被选元素时被触发</h3>
<div id="enter">
    <h4 style="background-color: aquamarine">触发mouseenter事件</h4>
    <h4 style="background-color: #fffb9a">我是mouseenter的子代</h4>
    <h5>次数：0</h5>
</div>
</body>
</html>

案例分析

mouseover事件：当鼠标进入被选元素和任意子元素，次数不断增加
mouseenter事件: 事件只有在鼠标指针进入被选元素时次数增加，经过其子元素次数不增加。

总结

mouseover与mouseenter事件的差别在于经过被选元素的子元素是否会触发。共同点是经过被选元素都会触发。

Zayn17

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件方法mouseover与mouseenter的差别

mouseenter(): 事件只有在鼠标指针进入被选元素时被触发mouseover(): 事件在鼠标指针进入被选元素或任意子元素时都会被触发测试代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</titl...
复制链接

扫一扫