screenX / Y，clientX / Y和pageX / Y有什么区别？ [英] What is the difference between screenX/Y, clientX/Y and pageX/Y?
问题描述
screenX / Y，clientX / Y和pageX / Y之间有什么区别？
What is the difference between screenX/Y, clientX/Y and pageX/Y?
同样对于iPad Safari，计算与桌面上的计算类似或者有因为视口有什么不同？
Also for iPad Safari, are the calculations similar as on desktop OR there is some difference because of viewport?
如果你能给我一个例子，那就太棒了。
It would be great if you could point me to an example.
推荐答案
在JavaScript中：
pageX，pageY，screenX，screenY，clientX和clientY返回一个数字，表示物理css像素的数量是一个点来自参考点。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。
pageX, pageY, screenX, screenY, clientX and clientY returns a number which indicates the number of physical "css pixels" a point is from the reference point. The event point is where the user clicked, the reference point is a point in the upper left. These properties return the horizontal and vertical distance from that reference point.
pageX和pageY：
相对于顶部在浏览器中完全呈现的内容区域的左侧。此参考点位于左上角的网址栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置，如果嵌入在页面中的嵌入式可滚动页面并且用户移动滚动条，则实际上可以更改位置。
pageX and pageY:
Relative to the top left of the fully rendered content area in the browser. This reference point is below the url bar and back button in the upper left. This point could be anywhere in the browser window and can actually change location if there are embedded scrollable pages embedded within pages and the user moves a scrollbar.
screenX和screenY：
相对于物理屏幕/监视器的左上角，只有增加或减少监视器数量或监视器分辨率时，此参考点才会移动。
screenX and screenY:
Relative to the top left of the physical screen/monitor, this reference point only moves if you increase or decrease the number of monitors or the monitor resolution.
clientX和clientY：
相对于内容区域的左上边缘（视口）浏览器窗口。即使用户在浏览器中移动滚动条，此点也不会移动。
clientX and clientY:
Relative to the upper left edge of the content area (the viewport) of the browser window. This point does not move even if the user moves a scrollbar from within the browser.
对于哪些浏览器支持哪些属性的视觉效果：
http：//www.quirksmode .org / dom / w3c_cssom.html＃t03
w3schools有一个在线Javascript解释器和编辑器，所以你可以看到每个人做什么
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>
这篇关于screenX / Y，clientX / Y和pageX / Y有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
