元素的屏幕坐标，通过 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2337795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Screen Coordinates of a element, via Javascript
提问by jerwood
I'm trying to get the screen coordinates (that is, relative to the top left corner of the screen) of an element in a browser window. It's easy to get the size and position of the window (screenX, screenY) and it's easy (with jQuery) to get the offset of the element ($('element').offset().left).
我正在尝试获取浏览器窗口中元素的屏幕坐标（即，相对于屏幕的左上角）。获取窗口的大小和位置（screenX，screenY）很容易，也很容易（使用jQuery）获取元素的偏移量（$('element').offset().left）。
However, I need to know how many pixels it is from the element all the way to the corner of the screen. I've found some things that appear to be specific to IE, but I'd like this to work in as many browsers as possible.
但是，我需要知道从元素到屏幕角落的像素数。我发现了一些似乎特定于 IE 的东西，但我希望它在尽可能多的浏览器中工作。
Edited to add a picture:
编辑添加图片：
采纳答案by Joel
window.screenX/Yare not supported on IE. But for other browsers, a close approximation of position is:
window.screenX/YIE 不支持。但是对于其他浏览器，位置的近似值是：
var top = $("#myelement").offset().top + window.screenY;
var left = $("#myelement").offset().left + window.screenX;
Exact position depends on what toolbars are visible. You can use the outer/innerWidthand outer/innerHeightproperties of the windowobject to approximate a little closer.
确切位置取决于可见的工具栏。您可以使用对象的outer/innerWidth和outer/innerHeight属性window来更接近一些。
IE doesn't provide much in the way of window properties, but oddly enough, a click event object will provide you with the screen location of the click. So I suppose you could have a calibration page which asks the user to "click the red dot" and handle the event with
IE 没有提供太多的窗口属性，但奇怪的是，单击事件对象将为您提供单击的屏幕位置。所以我想你可以有一个校准页面，要求用户“点击红点”并处理事件
function calibrate(event){
var top = event.screenY;
var left = event.screenX;
}
Or possibly use the mouseenter/leaveevents using the coordinates of that event to calibrate. Though you'd have trouble determining if the mouse entered from the left, right, top, or bottom.
或者可能使用使用该mouseenter/leave事件坐标的事件进行校准。尽管您无法确定鼠标是从左侧、右侧、顶部还是底部进入。
Of course, as soon as they move the screen you'll need to recalibrate.
当然，一旦他们移动屏幕，您就需要重新校准。
For lots more on browser property compatibilities see PPK's Object Model tables.
有关浏览器属性兼容性的更多信息，请参阅PPK 的对象模型表。
回答by Joel
I disagree with jvenema's answer.
我不同意 jvenema 的回答。
I have found a solution that is working for me on google chrome anyway, but I hope that this will works on many other browsers too (maybe not on some old internet explorers).
无论如何，我已经找到了一个在 google chrome 上对我有用的解决方案，但我希望这也适用于许多其他浏览器（可能不适用于某些旧的 Internet Explorer）。
Inside the <script>tags declare new two globalvariables called: pageX and pageY with the varkeyword.
在<script>标签内声明了两个新的全局变量，名为：pageX 和 pageY，并带有var关键字。
These global variables should always store the coordinates of the top left corner of the rendered pagerelative to the top left corner of the screen monitor, but in order to achieve this goal, the window.onmousemoveshould refers to a function that sets the pageX to the difference of event.screenX and event.clientX, and the pageY to the difference of event.screenY and event.clientY.
这些全局变量应该总是存储渲染页面左上角相对于屏幕监视器左上角的坐标，但是为了实现这个目标，window.onmousemoveshould 指的是一个函数，它设置 pageX 为event.screenX 和 event.clientX，以及 pageY 到 event.screenY 和 event.clientY 的区别。
Then all what you need to do is to get the coordinates of an element (relative to the top left corner of the rendered page) and add pageX and pageY. The results of these expressions will be the coordinates of this element relative to the top left corner of the screen monitor!
然后你需要做的就是获取一个元素的坐标（相对于渲染页面的左上角）并添加 pageX 和 pageY。这些表达式的结果将是该元素相对于屏幕监视器左上角的坐标！
Code example (only javascript):
代码示例（仅 javascript）：
<script>
var pageX;
var pageY;
window.onmousemove = function (e) {
pageX = e.screenX - e.clientX;
pageY = e.screenY - e.clientY;
}
function getScreenCoordinatesOf(obj) {
var p = {};
p.x = pageX + obj.clientLeft;
p.y = pageY + obj.clientTop;
return p;
}
</script>
Hope that helps!
希望有帮助！
回答by jvenema
I don't think this is possible.
我不认为这是可能的。
The element coordinates are relative to the top left corner of the rendered page.
元素坐标相对于渲染页面的左上角。
The window coordinates are relative to the screen.
窗口坐标是相对于屏幕的。
There is, to my knowledge, nothing that relates the top left corner of the rendered pageto the top left corner of the window. So there's no way to account for borders, scrollbars, chrome, etc. So I think you're sunk on this one.
据我所知，渲染页面的左上角与window 的左上角没有任何关系。所以没有办法考虑边框、滚动条、铬等。所以我认为你沉迷于这个。
