屏幕通过Javascript调整元素的坐标

Question

我正在尝试获取浏览器窗口中元素的屏幕坐标(即相对于屏幕的左上角).很容易得到窗口的大小和位置(screenX,screenY),并且很容易(用jQuery)来获取元素的偏移量($('element').offset().left).

但是,我需要知道从元素一直到屏幕一角的像素数.我发现了一些看似特定于IE的东西,但我希望这可以在尽可能多的浏览器中使用.

编辑添加图片: alt text http://img72.imageshack.us/img72/7938/offsetugh.jpg

Answer 1

window.screenX/Y在IE上不受支持.但对于其他浏览器,近似的位置是:

var top = $("#myelement").offset().top + window.screenY;
var left = $("#myelement").offset().left + window.screenX;

确切位置取决于可见的工具栏.您可以使用对象的outer/innerWidth和outer/innerHeight属性window近似一点.

IE没有提供太多的窗口属性,但奇怪的是,click事件对象将为您提供单击的屏幕位置.所以我想你可以有一个校准页面,要求用户"点击红点"并处理事件

function calibrate(event){
    var top = event.screenY;
    var left = event.screenX;
}

或者可能使用该mouseenter/leave事件的坐标来校准事件.虽然您无法确定鼠标是从左侧,右侧,顶部还是底部进入.

当然,只要他们移动屏幕,您就需要重新校准.

有关浏览器属性兼容性的更多信息,请参阅PPK的对象模型表.

Answer 2

我不同意jvenema的回答。

无论如何，我已经找到了对我来说适用于Google chrome的解决方案，但我希望它也可以在许多其他浏览器上使用（也许不适用于某些旧的Internet Explorer）。

在<script>标签内声明两个新的全局变量，分别为：pageX和pageY var。

这些全局变量应始终存储呈现的页面的左上角相对于屏幕监视器的左上角的坐标，但是为了实现此目标，window.onmousemove应当引用将pageX设置为与之不同的函数。 event.screenX和event.clientX，以及pageY与event.screenY和event.clientY的区别。

然后，您所需要做的就是获取元素的坐标（相对于呈现页面的左上角）并添加pageX和pageY。这些表达式的结果将是此元素相对于屏幕监视器左上角的坐标！

代码示例（仅适用于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>

希望有帮助！