事件对象----移动鼠标显示坐标_显示鼠标坐标-CSDN博客

设置两个div，当在第一个areaDiv中移动鼠标时，在showDiv中显示坐标。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件对象</title>
	<style>
		#areaDiv {
			width: 300px;
			height: 200px;
			border: 1px solid black;
		}
		#showDiv {
			width: 300px;
			height: 50px;
			border: 1px solid black;
		}
	</style>
	
	<script type="text/javascript">
		window.onload = function(){
			
			/* 在IE8中，响应函数被触发时，浏览器不会传递事件对象
				在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
				
				var x = window.event.clientX;
				var y = window.event.clientY;
				不兼容火狐
			*/
			
			//当鼠标在areaDiv中移动时，在showDiv中显示鼠标的坐标
			//获取两个div
			var areaDiv = document.getElementById("areaDiv");
			var showDiv = document.getElementById("showDiv");
			//鼠标移动事件
			//事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘的按键被按下，鼠标滚轮滚动的方向
			/* 
				不兼容IE8
				var x = event.clientX;
				var y = event.clientY;
			*/
			
			areaDiv.onmousemove = function(event){
				//判断 可以兼容
				//第一种写法
				if(!event){
					event = window.event;
				}
				
				//第二种写法
				event == event || window.event;
				
				//clientX  鼠标指针的水平坐标
				//clientY  鼠标指针的垂直坐标
				var x = event.clientX;
				var y = event.clientY;
				//在showDiv中显示鼠标移动的坐标
				showDiv.innerHTML = "x= "+ x +", y= "+y;
			};
		};
	</script>
</head>

<body>
	<div id="areaDiv"></div>
	<br>
	<div id="showDiv"></div>
	
</body>
</html>

注意兼容性问题，提供两种方法