浅谈mouseover和mouseenter及hover鼠标移入事件的异同点

最新推荐文章于 2024-05-25 14:02:07 发布

xswl2000

最新推荐文章于 2024-05-25 14:02:07 发布

阅读量3.1k

点赞数 3

文章标签： js javascript jquery css html

本文链接：https://blog.csdn.net/xswl2000/article/details/112978151

版权

mouseover和mouseout

mouseover

概述

在每一个匹配元素的mouseover事件中绑定一个处理函数。mouseover事件会在鼠标移入对象时触发。

mouseout

概述

在每一个匹配元素的mouseout事件中绑定一个处理函数。mouseout事件在鼠标从元素上离开后会触发。

mouseenter和mouseleave

mouseenter

概述

当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

mouseleave

概述

当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

hover

概述

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

下面是代码及演示效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标移入移出</title>
		<style>
			.out {
				margin: auto;
				width: 200px;
				height: 200px;
				background: blue;
			}

			.inner {
				position: absolute;
				width: 100px;
				height: 100px;
				top: 50px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="out">父div
			<div class="inner">子div</div>
		</div>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			let $out = $('.out')
			$out.mouseenter(function() {
				console.log("mouseenter:移入");
			}).mouseleave(function() {
				console.log("mouseleave:移出");
			});

			$out.mouseover(function() {
				console.log("mouseover:移入");
			}).mouseout(function() {
				console.log("mouseout:移出");
			});

			$out.hover(function() {
				console.log("hover:移入");
			}, function() {
				console.log("hover:移出");
			});
		</script>
	</body>
</html>

演示效果

mouseover和mouseout：当鼠标移入移出元素或子元素都会触发事件。（支持冒泡）
mouseenter和mouseleave：当鼠标移入移出元素才会触发事件。（不支持冒泡）
hover的效果等同于mouseenter，mouseleave。

学习记录，还望指正！

xswl2000

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
浅谈mouseover和mouseenter及hover鼠标移入事件的异同点

浅谈mouseover和mouseenter及hover鼠标移入事件的异同点mouseover和mouseoutmouseover概述在每一个匹配元素的mouseover事件中绑定一个处理函数。mouseover事件会在鼠标移入对象时触发。mouseout概述在每一个匹配元素的mouseout事件中绑定一个处理函数。mouseout事件在鼠标从元素上离开后会触发。mouseenter和mouseleavemouseenter概述当鼠标指针穿过元素时，会发生 mouseenter 事件。
复制链接

扫一扫