DOM获取鼠标坐标，并显示

最新推荐文章于 2023-05-15 09:52:47 发布

小生听雨园

最新推荐文章于 2023-05-15 09:52:47 发布

阅读量357

点赞数

分类专栏： Javascript 文章标签： js javascript css html

本文链接：https://blog.csdn.net/weixin_44154094/article/details/112912893

版权

Javascript 专栏收录该内容

62 篇文章 3 订阅

订阅专栏

1.图片效果

在这里插入图片描述

2.代码

<!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>