mouseover，mouseout和mouseenter，mouseleave的区别

最新推荐文章于 2023-08-17 22:04:33 发布

LSQ_2584951836

最新推荐文章于 2023-08-17 22:04:33 发布

阅读量166

点赞数

分类专栏： JS事件文章标签： js

本文链接：https://blog.csdn.net/LSQ_2584951836/article/details/102672552

版权

JS事件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

mouseover和mouseenter两个事件的区别

二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)

共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了。

举例说明：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .over {
            background-color: #66d3ff;
            width: 400px;
            float: left;
            padding: 10px 10px;
        }

        .enter {
            background-color: #66d3ff;
            width: 400px;
            float: left;
            margin-left: 30px;
            padding: 10px 10px;
        }

        h2 {
            background-color: #fff;
            padding: 5px 5px;
        }
    </style>
</head>

<body>
    <p>mouseover 事件:不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
    <p>mouseenter 事件:只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
    <div class="over">
        <h2>被触发的 Mouseover 事件次数：<span></span></h2>
    </div>
    <div class="enter">
        <h2>被触发的 Mouseenter 事件次数：<span></span></h2>
    </div>
    <script>
        var x = 0, y = 0;
        var div1 = document.getElementsByClassName("over")[0];
        div1.addEventListener("mouseover", function () {
            var span = this.getElementsByTagName("span")[0];
            span.innerText = (x += 1);
        }, false);

        var div2 = document.getElementsByClassName("enter")[0];
        div2.addEventListener("mouseenter", function () {
            var span = this.getElementsByTagName("span")[0];
            span.innerText = (y += 1);
        }, false);
    </script>
</body>

</html>

mouseout和mouseleave

同理

举例说明：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .over {
            background-color: #66d3ff;
            width: 400px;
            float: left;
            padding: 10px 10px;
        }

        .enter {
            background-color: #66d3ff;
            width: 400px;
            float: left;
            margin-left: 30px;
            padding: 10px 10px;
        }

        h2 {
            background-color: #fff;
            padding: 5px 5px;
        }
    </style>
</head>

<body>
    <p> mouseout事件：不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
    <p> mouseleave事件：只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
    <div class="over">
        <h2>被触发的 mouseout 事件次数：<span></span></h2>
    </div>
    <div class="enter">
        <h2>被触发的 mouseleave 事件次数：<span></span></h2>
    </div>
    <script>
        var x = 0, y = 0;
        var div1 = document.getElementsByClassName("over")[0];
        div1.addEventListener("mouseout", function () {
            var span = this.getElementsByTagName("span")[0];
            span.innerText = (x += 1);
        }, false);

        var div2 = document.getElementsByClassName("enter")[0];
        div2.addEventListener("mouseleave", function () {
            var span = this.getElementsByTagName("span")[0];
            span.innerText = (y += 1);
        }, false);
    </script>
</body>

</html>

LSQ_2584951836

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mouseover，mouseout和mouseenter，mouseleave的区别

mouseover和mouseenter两个事件的区别二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时...
复制链接

扫一扫

专栏目录