关于offsetXY、clientXY和screenXY的区别

最新推荐文章于 2021-12-30 13:17:48 发布

弗兰克的天空

最新推荐文章于 2021-12-30 13:17:48 发布

阅读量286

点赞数

分类专栏：网站前端

本文链接：https://blog.csdn.net/frank_fong/article/details/78933788

版权

网站前端专栏收录该内容

75 篇文章 1 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#box {
	width: 400px;
	height: 300px;
	margin: 20px auto;
	border: 1px solid #ddd;
}
#box span {
	color: #f00;
}
</style>
</head>

<body>
<div id="box">
  <p>client:<span id="txt1"></span></p>
  <p>offset:<span id="txt2"></span></p>
  <p>screen:<span id="txt3"></span></p>
</div>
<script>
	var box = document.getElementById('box');
	var txt1 = document.getElementById('txt1');
	var txt2 = document.getElementById('txt2');
	var txt3 = document.getElementById('txt3');
	box.onmousemove = function(event){
		//console.log(event);
		txt1.textContent = event.clientX + ',' + event.clientY;
		txt2.textContent = event.offsetX + ',' + event.offsetY;
		txt3.textContent = event.screenX + ',' + event.screenY;
	}
</script>
</body>
</html>