JS--JavaScript使用鼠标事件（click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove）

最新推荐文章于 2025-09-18 13:26:01 发布

原创最新推荐文章于 2025-09-18 13:26:01 发布 · 1.1w 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #JS鼠标事件

JavaScript 专栏收录该内容

47 篇文章

订阅专栏

本文详细解析了鼠标事件的各种类型，包括click、dblclick、mousedown、mouseup等，并提供了多个示例代码，如取消超链接跳转、页面元素拖放、鼠标经过效果及鼠标来源追踪，帮助读者深入理解并应用鼠标事件。

鼠标事件

事件类型	说明
click	单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上，并按了回车键时，同样会触发事件
dblclick	双击鼠标左键时发生，如果右键也按下则不会发生
mousedown	单击任意一个鼠标按钮时发生
mouseout	鼠标指针位于某个元素上，且将要移出元素的边界时发生
mouseover	鼠标指针移出某个元素，到另一个元素上时发生
mouseup	松开任意一个鼠标按钮时发生
mousemove	鼠标在某个元素上时持续发生

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>鼠标事件</p>
		<input type="text" id="text"/>
		<script>
			var p1 = document.getElementsByTagName("p")[0];
			var t = document.getElementById("text");
			
			function f(){
				var eve = event || window.event;
				t.value = eve.type;
			}
			p1.onmouseover = f;//注册鼠标经过时事件处理函数
			p1.onmouseout = f;//注册鼠标移开时事件处理函数
			p1.onmousedown = f;//注册鼠标按下时事件处理函数
			p1.onmouseup = f;//注册鼠标松开时事件处理函数
			p1.onmousemove = f;//注册鼠标移动时事件处理函数
			p1.onclick = f;//注册鼠标单击时事件处理函数
			p1.ondblclick = f;//注册鼠标双击时事件处理函数
		</script>
	</body>
</html>

在这里插入图片描述

鼠标点击

鼠标点击事件包括4个：click（单击）、dblclick（双击）、mousedown（按下）和mouseup（松开）。其中click事件比较常用。当这些事件处理函数返回值为false时，会禁止绑定对象的默认行为。

示例：取消超链接被单击时的跳转行为

<a name="tag" id="tag" href="https://www.baidu.com">百度</a>
<script>
	var a = document.getElementsByTagName("a");
	for(var i = 0; i < a.length; i++){
		a[i].onclick = function(){
			return false;
		}
	}
</script>

鼠标移动

mousemove事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢，以及浏览器跟踪更新的速度。

示例：页面元素拖放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box"></div>
		<script>
			//初始化拖放对象
			var box = document.getElementById("box");
			box.style.position = "absolute"; //绝对定位
			box.style.width = "160px"; //宽度160像素
			box.style.height = "120px"; //高度120像素
			box.style.backgroundColor = "red"; //红色
			
			//初始化变量，标准化事件对象
			var mx, my, ox, oy;
			function e(event){
				if(!event){
					event = window.event;
					event.target = event.srcElement;
					event.layerX = event.offsetX;
					event.layerY = event.offsetY;
				}
				//计算鼠标指针的x轴距离
				event.mx = event.pageX || event.clientX + document.body.scrollLeft;
				//计算鼠标指针的y轴距离
				event.my = event.pageY || event.clientY + document.body.scrollTop;
				return event;
			}
			
			//定义鼠标事件处理函数
			document.onmousedown = function(event){
				event = e(event);//获取标准事件对象
				o = event.target;
				ox = parseInt(o.offsetLeft); //拖放元素的x轴坐标
				oy = parseInt(o.offsetTop); //拖放元素的y轴坐标
				mx = event.mx;		//按下鼠标指针的x轴坐标
				my = event.my;      //按下鼠标指针的y轴坐标
				document.onmousemove = move;
				document.onmouseup = stop;
			}
			function move(event){
				event = e(event);
				o.style.left = ox + event.mx - mx + "px"; //定义拖动元素的x轴距离
				o.style.top = oy + event.my - my + "px"; //定义拖动元素的y轴距离
			}
			function stop(event){
				event = e(event);
				ox = parseInt(o.offsetLeft); //记录拖放元素的x轴坐标
				oy = parseInt(o.offsetTop);  //记录拖放元素的y轴坐标
				mx = event.mx;	//记录鼠标指针的x轴坐标
				my = event.my;	//记录鼠标指针的y轴坐标
				o = document.onmousemove = document.onmouseup = null; //释放对象
			}
		</script>
	</body>
</html>

在这里插入图片描述

鼠标经过

鼠标经过包括移过和移出两种事件类型。当移动鼠标指针到某个元素上时，将触发mouseover事件；而当把鼠标指针移出某个元素时，将触发mouseout事件。如果从父元素中移到了子元素中时，也会触发父元素的mouseover事件类型。

示例：分别为3个嵌套的div元素定义了mouseover和mouseout事件处理函数，当从外层的父元素中移动内部的子元素中，将会触发父元素的mouseover事件类型，但是不会触发mouseout事件类型。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			<div>
				<div>盒子</div>
			</div>
		</div>
		<script>
			var div = document.getElementsByTagName("div");
			for(var i = 0; i < div.length; i++){
				div[i].onmouseover = function(){
					this.style.border = "solid blue";
				}
				div[i].onmouseout = function(){
					this.style.border = "solid red";
				}
			}
		</script>
	</body>
</html>

鼠标来源

当一个事件发生后，可以使用事件对象的target属性获取发生事件的节点元素。如果在IE事件模型中实现相同的目标，可以使用srcElement属性。

示例：当鼠标移过页面中的div时，会弹出提示对话框，提示当前元素的节点名称

<div>div元素</div>
<script>
	var div = document.getElementsByTagName("div")[0];
	div.onmouseover = function(e){
		var e = e || window.event;
		var o = e.target || e.srcElement;
		alert(o.tagName);
	}
</script>

另外，在DOM事件模型中，还定义了currentTarget属性，当事件在传播过程中（如捕获和冒泡阶段）时，该属性值与target属性值不同。因此，一般在事件处理函数中，应该使用该属性而不是this关键词获取当前对象。

示例：当鼠标移动到div元素上时，会弹出“BODY”字符提示信息，说明鼠标指针是从body元素过来的；而移开鼠标指针时，又弹出“BODY“字符提示信息，说明离开元素将要移到的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>div元素</div>
		<p>段落</p>
		<script>
			var div = document.getElementsByTagName("div")[0];
			div.onmouseover = function(){
				var e = e || window .event;
				var o = e.relatedTarget || e.fromElement;//标准化事件属性
				alert(o.tagName);
			}
			div.onmouseout = function(){
				var e = e || window .event;
				var o = e.relatedTarget || e.toElement;//标准化事件属性
				alert(o.tagName);
			}
		</script>
	</body>
</html>

在这里插入图片描述