screenX / Y，clientX / Y和pageX / Y有什么区别？

-->

screenX / Y，clientX / Y和pageX / Y有什么区别？

2020-02-27 09:33发布

站内文章 / 前端开发

0 0

爷的心禁止访问

女 | 书童

私信

screenX / Y ， clientX / Y和pageX / Y什么pageX ？

另外，对于iPad Safari，计算结果是否与台式机相似？还是因为视口而有所不同？

如果您能指出一个例子，那就太好了。

#1楼

pageX / Y给出相对于CSS像素中<html>元素的坐标。
clientX / Y以CSS像素给出相对于viewport的坐标。
screenX / Y以设备像素为单位给出相对于screen的坐标。

关于您的最后一个问题，在台式机和移动浏览器上计算是否相似...为了更好地理解-在移动浏览器上，我们需要区分两个新概念： 布局视口和可视视口 。可视视口是页面上当前显示在屏幕上的部分。布局视口是在桌面浏览器上呈现的整个页面（包括在当前视口中不可见的所有元素）的同义词。

在移动浏览器中， pageX和pageY仍相对于页面以CSS像素为单位，因此您可以获得相对于文档页面的鼠标坐标。另一方面， clientX和clientY定义相对于可视视口的鼠标坐标。

关于可视化视口和布局视口之间的区别，这里还有另一个stackoverflow线程：可视化视口和布局视口之间的区别？

另一个很好的资源： http : //www.quirksmode.org/mobile/viewports2.html

#2楼

这是一张图片，解释pageY和clientY之间的区别。

分别与pageX和clientX相同。

pageX/Y坐标相对于整个渲染页面（包括通过滚动隐藏的部分）的左上角，

而clientX/Y坐标则相对于页面可见部分的左上角，可以通过浏览器窗口“看到”。

观看演示

您可能永远不需要screenX/Y

#3楼

帮助我的是，直接在此页面中添加了一个事件，然后自己点击了！在开发人员工具/ Firebug等中打开控制台，然后粘贴以下内容：

document.addEventListener('click', function(e) { console.log( 'page: ' + e.pageX + ',' + e.pageY, 'client: ' + e.clientX + ',' + e.clientY, 'screen: ' + e.screenX + ',' + e.screenY) }, false);

Click anywhere

使用此代码段，您可以在滚动，移动浏览器窗口等时跟踪点击位置。

注意，当您一直滚动到顶部时，pageX / Y和clientX / Y是相同的！

#4楼

两者之间的差异将在很大程度上取决于您当前所指的浏览器。每个属性都以不同的方式或根本没有实现这些属性。 Quirksmode拥有大量有关W3C标准（如DOM和JavaScript事件）的浏览器差异的文档。

#5楼

在JavaScript中：

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

pageX和pageY ：
相对于浏览器中完整呈现的内容区域的左上角。该参考点在URL栏下方，并且在左上方是“后退”按钮。这一点可能在浏览器窗口中的任何位置，并且如果页面中嵌入了嵌入式可滚动页面并且用户移动了滚动条，则实际上可以更改位置。

screenX和screenY ：
相对于物理屏幕/监视器的左上角，仅当您增加或减少监视器数量或监视器分辨率时，此参考点才会移动。

clientX和clientY ：
相对于浏览器窗口内容区域（视口）的左上边缘。即使用户从浏览器内部移动滚动条，此点也不会移动。

要查看哪些浏览器支持哪些属性，请执行以下操作：

http://www.quirksmode.org/dom/w3c_cssom.html#t03

w3schools拥有一个在线Java解释器和编辑器，因此您可以看到各自的功能

http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy

<!DOCTYPE html> <html> <head> <script> function show_coords(event) { var x=event.clientX; var y=event.clientY; alert("X coords: " + x + ", Y coords: " + y); } </script> </head> <body> <p onmousedown="show_coords(event)">Click this paragraph, and an alert box will alert the x and y coordinates of the mouse pointer.</p> </body> </html>

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3156044

标签：