mouseenter/mouseleave和mouseover/mouseout的区别

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

整点薯条8

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

阅读量278

点赞数

分类专栏：学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/m0_47354578/article/details/107466009

版权

学习笔记专栏收录该内容

33 篇文章 1 订阅

订阅专栏

共同点：都是鼠标进入进出时会触发的回调函数。
不同点：进入子元素是否会触发：
在这里插入图片描述
demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #outside { 
        	width: 300px; 
        	height: 300px; 
        	border: 1px solid #666
         }
        #outside #inner { 
	        width: 100px; 
	        height: 100px; 
	        background: #ccc;
         }
    </style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#inner').mouseover(() => {
                console.log( 'mouseover被触发' );
            }).mouseout(() => {
                console.log( 'mouseout被触发' );
            });

            $('#inner').mouseenter(() => {
                console.log( 'mouseenter被触发' );
            }).mouseleave(() => {
                console.log( 'mouseleave被触发' );
            });
        });
    </script>
</head>
<body>
    <div id="outside">
        <div id="inner"></div>
    </div>
</body>
</html>

通过运行此例子中可以看出：

在一个嵌套的div中，鼠标移入到id为outside的div中会触发mouseover和mouseenter事件；
鼠标移入到id为inner的div中时，只会触发mouseout事件而不会触发mouseleave事件；
如果是从inner移入到outside中，会再次触发一次mouseover事件。
只有当鼠标从outside离开时，才会触发mouseleave事件。

整点薯条8

关注

0
点赞
踩
0

收藏

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

共同点：都是鼠标进入进出时会触发的回调函数。不同点：进入子元素是否会触发：demo<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content
复制链接

扫一扫