鼠标事件mouseover mouseout 和mouseenter mouseleave的区别

最新推荐文章于 2023-11-21 08:47:56 发布

Yoghurt尧

最新推荐文章于 2023-11-21 08:47:56 发布

阅读量368

点赞数

分类专栏： Javascript html 浏览器

原文链接：https://blog.csdn.net/huahuahua__/article/details/81669528

版权

Javascript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html 浏览器

2 篇文章 0 订阅

订阅专栏

mouseover mouseout：在鼠标进入或者离开作用元素或者其子元素时，都会触发

在进入son的时候，因为离开了father，所以会触发一次mouseout，同理，在再次进入father的时候，也因为离开了son，所以先触发了一次mouseout再触发mouseover。在进入子元素也会触发mouseover是因为子元素的mouseover事件冒泡到父元素中，被父元素监听到，进而触发了mouseover的响应事件。

mouseenter mouseleave：在鼠标进入作用元素的时候才会触发。

以下是测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    body{
        margin-top: 100px;
        margin-left: 100px;
    }
    .father{
        width: 200px;
        height: 200px;
        background-color: blue;
        overflow: hidden;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: red;
        margin:50px 50px;
    }
</style>
<script src="jquery.js"></script>
<script>
    $(document).ready(function(){
        $('.father').mouseover(function(){
            console.log('进入');
        });
        $('.father').mouseout(function(){
            console.log('出去');
        });
    });
</script>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

Yoghurt尧

关注

0
点赞
踩
0

收藏

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

mouseover mouseout：在鼠标进入或者离开作用元素或者其子元素时，都会触发在进入son的时候，因为离开了father，所以会触发一次mouseout，同理，在再次进入father的时候，也因为离开了son，所以先触发了一次mouseout再触发mouseover。在进入子元素也会触发mouseover是因为子元素的mouseover事件冒泡到父元素中，被父元素监听到，进而触发...
复制链接

扫一扫

专栏目录