鼠标放到方块中可以获得坐标（适用于IE8）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45215652/article/details/121438210

本文介绍了一种方法，当鼠标在areaDiv元素内移动时，能够实时显示鼠标的坐标信息。适用于包括IE8在内的浏览器，主要利用JavaScript和CSS3技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图所示
在这里插入图片描述
鼠标在areaDiv中移动时，在showMsg中显示坐标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#areaDiv{
				border:1px solid black;
				height: 40px;
				width:300px;
				
			}
			#showMsg{
				border:1px solid black;
				height:20px;
				width:300px;
				margin-top: 10px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				// 鼠标在areaDiv中移动时，在showMsg中显示坐标
				var areaDiv = document.getElementById("areaDiv");
				var showMsg = document.getElementById("showMsg");
				// onmousemove 该事件会在鼠标元素中移动时被触发
				// showMsg显示坐标
				areaDiv.onmousemove = function(event){
					
					// 在IE8及以下是将事件对象作为window对象属性保存
					// if(!event){
					// 	event = window.event;
					// }
					event = event||window.event;
					// clientX clientY 可以获取指针的水平 垂直坐标
					var x = event.clientX;
					var y = event.clientY;
					
					// alert("x = "+x+", y = "+y);	
					showMsg.innerHTML = "x = "+x+", y = "+y;
					};
				};		
		</script>
	</head>
	<body>
		<div id="areaDiv"></div>
		<div id="showMsg"></div>
	</body>
</html>