screenX/Y, clientX/Y和pageX/Y之间有什么区别?

同样,对于iPad Safari,计算是否与桌面相似-或者因为视口而有一些不同?

如果你能给我举个例子就太好了。


当前回答

两者之间的差异很大程度上取决于您当前引用的浏览器。每个程序都以不同的方式实现这些属性,或者根本不实现。Quirksmode提供了大量关于浏览器与W3C标准(如DOM和JavaScript Events)差异的文档。

其他回答

两者之间的差异很大程度上取决于您当前引用的浏览器。每个程序都以不同的方式实现这些属性,或者根本不实现。Quirksmode提供了大量关于浏览器与W3C标准(如DOM和JavaScript Events)差异的文档。

在JavaScript中:

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

pageX和pageY: 相对于浏览器中完全呈现的内容区域的左上角。这个参考点在左上角的URL栏和后退按钮下面。这个点可以在浏览器窗口的任何地方,如果页面中嵌入了可滚动的页面,并且用户移动了滚动条,这个点实际上可以改变位置。

screenX和screenY: 相对于物理屏幕/显示器的左上角,只有当您增加或减少显示器数量或显示器分辨率时,这个参考点才会移动。

clientX和clientY: 相对于浏览器窗口的内容区域(视口)的左上角边缘。即使用户从浏览器中移动滚动条,该点也不会移动。

要查看哪些浏览器支持哪些属性:

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

< >脚本 函数showCoordinates(事件){ var x = event.clientX; var y = event.clientY; alert(' X坐标:${X}, Y坐标:${Y} '); } > < /脚本 < p onmousedown = " showCoordinates(事件)" > 单击这个段落,一个警告框将显示x 以及鼠标相对于视口的y坐标 < / p >

与offsetX/Y的比较

其他有趣的属性是offsetX/Y(鼠标与所单击元素/节点的边界之间的偏移量)。以下是更全面的情况:

我不喜欢也不理解那些可以用语言直观地解释的东西。

clientX/Y指的是相对屏幕坐标,例如,如果你的网页足够长,那么clientX/Y给出了点击点的坐标位置,根据其实际像素位置,而ScreenX/Y给出了参考页面开始的纵坐标。