当鼠标在box1中移动时，box2中显示坐标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#box1{
				width: 400px;
				height: 200px;
				border: 1px solid black;
				margin: 10px;
			}
			#box2{
				width: 200px;
				height: 100px;
				border: 1px solid black;
				margin: 10px;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				//当鼠标在box1中移动时，box2中显示坐标
				//获取box1
				var box1=document.getElementById("box1");
				var box2=document.getElementById("box2");
				//onmousemove事件将会在鼠标在元素中移动时被触发
				//事件对象：当事件的响应函数被触发时浏览器每次都会将一个事件对象作为实参传递进响应函数
				//在事件对象中封装了当前事件相关的一切信息
				box1.onmousemove=function(event){
					//获取box1的坐标client X ,client Y
					// var x=event.clientX;
					// var y=event.clientY;
					//显示坐标至box2中
					//在IE8中，响应函数被触发时，浏览器不会传递给事件对象
					//在IE8及以下的浏览器中，是将事件对象作为window对象的
					// var x=window.event.clientX;
					// var y=window.event.clientY;
					//但此时火狐、IE11不行
					// if(!event){
					// 	event=window.event;
					// }
					//或者
					event=event||window.event;
					var x=event.clientX;
					var y=event.clientY;
					box2.innerHTML="x="+x+",y="+y;
				};
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>
原文链接：https://blog.csdn.net/w18789476022/article/details/109525671