pageX，pageY，screenX，screenY，clientX，和clientY，offsetX ，offsetY，layerX，layerY的使用和区别

北方的刀郎

已于 2022-01-25 14:41:29 修改

阅读量2.2k

点赞数 2

分类专栏： javascript学习文章标签： javascript pageX pageY screenX screenY offsetx offsetY clientX clientY

于 2022-01-25 14:29:29 首次发布

本文链接：https://blog.csdn.net/forest_fire/article/details/122684466

版权

javascript学习专栏收录该内容

75 篇文章

订阅专栏

pageX，pageY，screenX，screenY，clientX，和clientY返回一个数，其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。

属性说明
clientX   以浏览器左上顶角为原点，定位 x 轴坐标
clientY   以浏览器左上顶角为原点，定位ｙ轴坐标
offsetX   以当前事件的目标对象左上角为原点，定位x轴坐标
offsetY   以当前事件的目标对象左上角为原点，定位y轴坐标
pageX   以Document 对象（即文本窗口）左上角为原点，定位x轴坐标
pageY   以Document 对象（即文本窗口）左上角为原点，定位ｙ轴坐标
screenX   计算机屏幕左上角为原点，定位x轴坐标
screenY   计算机屏幕左上角为原点，定位ｙ轴坐标
layerX   最近的绝对定位的父元素（如果没有，则为Document对象）左上角为原点，定位x轴坐标
layerY   最近的绝对定位的父元素（如果没有，则为Document对象）左上角为原点，定位ｙ轴坐标

写了俩文件，放一个文件夹内测试看完就能明白，

layerX_pageX_clientX_screenX_window_document_body.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="border:1px solid yellow">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery1rm</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<!---或者下载到本地引入也可以-->
</head>


<style>
	.co{
		border:10px solid red;
		padding:10px;
		background:green; 
		box-sizing:border-box;
	
	}

	.dv{
		width: 500px;
		height: 200px;
	}


</style>
<script type="text/javascript">
$(function(){

	console.log("out##############SSSSS")

	//document window 是对象，body只是标签所以加引号
	console.log("$(window).width()",$(window).width())
	console.log("$(document).width()",$(document).width())
	console.log("$('body').width()",$('body').width())// 不包括padding，border


	console.log("$(window).height()",$(window).height())
	console.log("$(document).height()",$(document).height())
	console.log("$('body').height()",$("body").height())

	console.log("out##############EEEEE")

});

</script>
<body class="co" style="width: 1000px;height: 1000px;"><!--body能规定宽高，但是背景还是全屏的，我曹-->
	iframe中计算宽高：<br>	
	<iframe src="layerX_pageX_clientX_screenX_window_document_body_ifram.html" frameborder="0" width="500" height="500"></iframe>

		<div class="dv co"></div>

</body>	
</html>

layerX_pageX_clientX_screenX_window_document_body_ifram.html ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery1rm</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<!---或者下载到本地引入也可以-->
</head>



<body style="background: #ccc;padding:0;margin:0;">
	
	<div style="position: relative;width: 300px;height: 300px;background: red; margin-left:50px;">
		
		<div style="position: absolute;width: 50px;height: 50px;background: green;top:10px;left: 10px;"></div>
	</div>
	<div style="width: 50px;height: 50px;background:yellow; position: fixed; top:10px;left: 100px;">fixed</div>
	<a href="https://www.cnblogs.com/xiaotaiyang/p/3843073.html" target="_blank">event.pageX</a>
	<img src="event.jpg" alt="" />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	这里是子窗口
	<br /><br />
	<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F26%2F20200326212002_rxlyj.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642826088&t=be40a3a042b2c165c05ca715b5cade93"  alt="" />
</body>	
<script type="text/javascript">
$(function(){
	// console.log($(window))
	// console.log($(document))
	// console.log($("body"))


	// console.log($(document).width())
	// console.log($("body").width())




	console.log("inner##############SSSSS")

	//document window 是对象，body只是标签所以加引号
	console.log("$(window).width()",$(window).width())
	console.log("$(document).width()",$(document).width())
	console.log("$('body').width()",$('body').width())// 不包括边距


	console.log("$(window).height()",$(window).height())
	console.log("$(document).height()",$(document).height())
	console.log("$('body').height()",$("body").height())

	console.log("inner##############EEEEE")
	console.log($("img").height())

});

/*$(window).load(function(){
		console.log($(window).height())
		console.log($(document).height())
		console.log($("body").height())
		console.log($("img").height())
})*/
window.onload = function(){
		console.log($(window).height())
		console.log($(document).height())
		console.log($("body").height())
		console.log($("img").height())

		
		console.log("$(window).width()",$(window).width())

}

$("body").on("click","div",function(event){
	event.stopPropagation();
	console.log("event.screenX:",event.screenX);//相对电脑屏幕
	console.log("event.clientX:",event.clientX);//鼠标相对浏览器的坐标
	console.log("event.pageX:",event.pageX);//相对页面右上角
	console.log("event.offsetX:",event.offsetX);//鼠标相对于“触发事件的元素”的位置
	

	console.log("event.screenY:",event.screenY);//鼠标相对整个屏幕的坐标，比如把浏览器缩小，这个坐标就是距离电脑屏幕顶部的距离
	console.log("event.clientY:",event.clientY);//鼠标相对浏览器的坐标
	console.log("event.pageY:",event.pageY);
	console.log("event.offsetY:",event.offsetY);



	/* 测试以下全 undefiend
	console.log("event.laylerX:",event.laylerX);
	console.log("event.laylerY:",event.laylerY);
	console.log("event.x:",event.x);
	console.log("event.y:",event.y);
	*/



})
</script>
</html>