mouseenter鼠标事件

最新推荐文章于 2024-09-06 22:20:29 发布

hcoke

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量2.9k

点赞数

分类专栏： JavaScript 学习笔记文章标签： JavaScript 前端

本文链接：https://blog.csdn.net/m0_62962469/article/details/124070729

版权

学习笔记同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

JavaScript

40 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中mouseenter和mouseover两个鼠标事件的区别。mouseenter事件仅在鼠标进入元素本身时触发，不考虑子元素，而mouseover事件在鼠标经过元素及其子元素时都会触发。由于mouseenter不冒泡，因此它不会在子元素上重复触发。通过示例代码演示了这两个事件的不同行为，帮助开发者更好地理解和使用这两个事件。

摘要由CSDN通过智能技术生成

mouseenter鼠标事件

1.当鼠标移动到元素上时就会触发mouseenter事件

2.类似mouseover，它们两者之间的差别是

mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发

这样的原因就是 mouseenter不会冒泡。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father {
				width: 300px;
				height: 300px;
				background-color: pink;
			}
			
			.son {
				width: 200px;
				height: 200px;
				background-color: skyblue;
			}
			
			.w {
				margin: 100px auto;
			}
		</style>
	</head>
	<body>
		<div class="father w">
			<div class="son w">
				
			</div>
		</div>
		<script type="text/javascript">
			var father = document.querySelector('.father');
			var son = document.querySelector('son');
			father.addEventListener('mouseenter',function() {
				console.log(11);
			})
		</script>
	</body>
</html>

mouseover鼠标划过这两个盒子公共部分一次：

mouseenter鼠标划过这两个盒子公共部分一次：

hcoke

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
mouseenter鼠标事件

mouseenter鼠标事件1.当鼠标移动到元素上时就会触发mouseenter事件2.类似mouseover，它们两者之间的差别是mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发这样的原因就是 mouseenter不会冒泡。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></t
复制链接

扫一扫