clientX、screenX、offsetX区别

最新推荐文章于 2022-01-04 11:50:47 发布

LLL_LH

最新推荐文章于 2022-01-04 11:50:47 发布

阅读量380

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/80520958

版权

js 专栏收录该内容

78 篇文章 1 订阅

订阅专栏

1、clientX/clientY

clientX: 鼠标相对于浏览器文档显示区的水平X坐标,不包括工具栏和滚动条

clientY:鼠标相对于浏览器文档显示区的垂直Y坐标,不包括工具栏和滚动条

2、screenX/screenY

screenX:鼠标相对于显示器屏幕的水平X坐标,不包括滚动条

screenY:鼠标相对于显示器屏幕的垂直Y坐标,不包括滚动条

3、offsetX/offsetY

offsetX:鼠标相对于事件源(被点击的元素)本身的水平X坐标

offsetY:鼠标相对于事件源(被点击的元素)本身的垂直Y坐标

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.box{width: 400px;height: 400px;border: 10px solid gold;padding: 10px;}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script>
			var box=document.querySelector('.box');
			box.onclick=function(e){
				var e=e||window.event;
				console.log("clientX:"+e.clientX);
				console.log("clientY:"+e.clientY);
				console.log("screenX:"+e.screenX);
				console.log("screenY:"+e.screenY);
				console.log("offsetX:"+e.offsetX);
				console.log("offsetY:"+e.offsetY);
			}
		</script>
	</body>
</html>

图解：

LLL_LH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
clientX、screenX、offsetX区别

1、clientX/clientYclientX: 鼠标相对于浏览器文档显示区的水平X坐标,不包括工具栏和滚动条clientY:鼠标相对于浏览器文档显示区的垂直Y坐标,不包括工具栏和滚动条2、screenX/screenYscreenX:鼠标相对于显示器屏幕的水平X坐标,不包括滚动条screenY:鼠标相对于显示器屏幕的垂直Y坐标,不包括滚动条3、offsetX/offse...
复制链接

扫一扫