DOM gets mouse coordinates and displays

1. Picture effect

Insert picture description here

2. Code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
    
    
				width: 300px;
				height: 300px;
				background-color: #FFFF00;
				margin: 10px;
			}
			#box2{
    
    
				width: 300px;
				height: 100px;
				margin: 10px;
				border-style: solid;
				border-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			
		</div>
		<div id="box2">
			
		</div>
		<script type="text/javascript">
			var box1= document.getElementById("box1");
			var box2 = document.getElementById("box2");
			box1.onmousemove = function(event){
    
    
				/*
				 * 在IE8中,响应函数被处罚时,浏览器不会传递事件对象,
				 * 	在IE8及以下的浏览器中,是将事件对象作为window对象的属性保存的
				 */
				if(!event){
    
    
					event = window.event;
				}
				//解决事件对象的兼容性问题
				event = event || window.event;
				var xp = event.clientX;
				var yp = event.clientY;
				box2.innerHTML = "x坐标:"+xp+"\ty坐标"+yp;
			}
		</script>
	</body>
</html>

Guess you like

Origin blog.csdn.net/weixin_44154094/article/details/112912893