mouseover和mouseenter

mouseenter:当进入盒子的范围时会触发，从父盒子内进入子盒子
mouseover:进入盒子时触发，如果父盒子内还有子盒子，进出子盒子都会触发over

图片中标注了三种情况
1.从外部进入父盒子

2.从父盒子进入子盒子，从子盒子进入父盒子

3.从外部进入子盒子

其中1和3会触发mouseover和mouseenter
2只会触发mouseover

测试代码：

<style>
    .father {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
</style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>

    <script>
        var father = document.querySelector('.father');
        father.addEventListener('mouseover', function () {
            console.log('over');
        })
        father.addEventListener('mouseenter', function () {
            console.log('enter');
        })
    </script>
</body>
posted @ 2022-03-27 10:43  qiao101  阅读(71)  评论(0)    收藏  举报