js 鼠标mouseover mouseenter mousemove mouseout mouseleave事件执行

最新推荐文章于 2024-05-29 21:49:39 发布

gyy_csdn

最新推荐文章于 2024-05-29 21:49:39 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/aoe3829/article/details/81540762

版权

mouseenter和mouseleave一起使用：

mouseenter:第一次进入元素是触发。

mouseleave:鼠标移动到元素之外时触发。

mosueover和mouseout一起使用：

mouseover:当鼠标从一个元素移入另一个元素时触发。

mouseout:鼠标移出一个元素，移入另一个元素时触发。

mousemove:鼠标在元素内部移动时触发，不断地重复触发。

mouseout和mouseleave的区别：

mouseout在鼠标离开该元素或该元素的子元素时都会触发，mouseleave只会在离开该元素时触发。

mouseover和mouseenter的区别：

mouseover在鼠标进入该元素或该元素的子元素时都会触发，mouseenter只会在进入该元素时触发。

示例：

<!DOCTYPE html>
<html>
<head>
	<title>mouse事件</title>
</head>
<style type="text/css">
	#div1{
		width: 200px;
		height: 100px;
		background: red;
		position: relative;
	}
	#div2{
		width: 100px;
		height: 50px;
		position: absolute;
		top: 20px;
		left: 50px;
		background: blue;
	}
</style>
<body>
	<div id="div1">
		<div id="div2"></div>
	</div>
	<script type="text/javascript">
		var d = document.getElementById('div1');
		d.addEventListener('mouseenter', function(){
			console.log('mouseenter');
		})
		d.addEventListener('mousemove',function(){
			console.log('mousemove');
		})
		d.addEventListener('mouseleave', function(){
			console.log('mouseleave');
		})
		d.addEventListener('mouseover',function(){
			console.log('mouseover');
		})
		d.addEventListener('mouseout', function(){
			console.log('mouseout');
		})
	</script>
</body>
</html>

当鼠标进入div1，穿过div2，到鼠标离开div1，执行结果：

gyy_csdn

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js 鼠标mouseover mouseenter mousemove mouseout mouseleave事件执行

mouseenter和mouseleave一起使用：mouseenter:第一次进入元素是触发。mouseleave:鼠标移动到元素之外时触发。mosueover和mouseout一起使用： mouseover:当鼠标从一个元素移入另一个元素时触发。mouseout:鼠标移出一个元素，移入另一个元素时触发。 mousemove:鼠标在元素内部移动时触发，不断地重复触发。...
复制链接

扫一扫