JavaScript中鼠标移动事件的坐标获取

最新推荐文章于 2025-03-22 20:57:38 发布

原创最新推荐文章于 2025-03-22 20:57:38 发布 · 2.3k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

js基础教程

这篇博客介绍了如何在JavaScript中捕获并显示鼠标移动事件的坐标，通过事件处理函数获取到鼠标的x、y位置，并在浏览器中进行输出。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

#areaDiv {
	border: 1px solid black;
	width: 300px;
	height: 50px;
	margin-bottom: 10px;
}

#showMsg {
	border: 1px solid black;
	width: 300px;
	height: 20px;
}

</style>
<script type="text/javascript">

window.onload = function(){

/*
 * 当鼠标在areaDiv中移动时，在showMsg中显示鼠标坐标
 */

//获取两个div

var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");

/*
 * onmousemove
 *  - 该事件将会在鼠标在元素中移动时触发
 * 
 * 事件对象
 *  - 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递给响应函数
 * 		在事件对象中封装来当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个按键被按下，滚轮的滚动方向
 */

areaDiv.onmousemove = function(event){
	
	/*
	 * 在IE8中，响应函数被触发时，浏览器不会传递事件对象，
	 *  在IE8中及以下的浏览器中，是将事件对象作为window对象的属性保存的
	 */

// alert(“鼠标动了”)
// 在showMsg中显示鼠标的坐标

	/*
	 * clientX可以获取鼠标指针的水平坐标
	 * clientY可以获取鼠标指针的垂直坐标
	 */
	if(!event){
		event= window.event;
	}
	
	//解决事件对象的兼容性问题
	event = event||window.event
	
	var  x = event.clientX;
	var  y = event.clientY;

// alert("x = “+x+”, y = "+y);

	//在showMsg中显示鼠标的坐标
	showMsg.innerHTML = "x = "+x+", y = "+y;
	};
	
};

</script>
</head>
<body>

<div id="areaDiv"></div>
<div id="showMsg"></div>

</body>
</html>

浏览器输出效果
鼠标移动