javascript - 鼠标位置和偏移

Question

我在某些网页上获取鼠标坐标并保存它们。

$("div#container").mousemove( function(e) {
      client_x = e.pageX;
  client_y = e.pageY;

  // save x,y

});

现在其他人加载同一页面，我想向他们显示相同的坐标（x，x 位置）。

如果我必须考虑到 div#container 与浏览器中的位置不同（考虑屏幕分辨率和滚动），我怎么能得到相同的点？

Answer 1

我将使用父 div 容器的$.offset().top和$.offset().left，并计算与鼠标光标当前 X 和 Y 坐标的差异。

.offset()总是引用文档而不是元素的父元素。

例如：

$('#element').mousemove(function(e){
    var client_x = e.pageX;
    var client_y = e.pageY;
    var elementOffset = $(this).offset();
    client_x -= elementOffset.left;
    client_y -= elementOffset.top;

    // save x, y.
});

然后，在其他用户显示器上，将坐标添加到他的偏移后显示坐标。

Answer 2

在您的示例中，您可以使用返回的值offset()：

$("div#container").offset().left 和 $("div#container").offset().top

将它们减去e.pageX和e.pageY。

offset()函数为您提供匹配元素相对于文档的位置（请参阅文档），因此如果用户向下滚动则没有问题。

示例：http: //jsfiddle.net/3jMRS/

Answer 3

由于您在问题中提到的变量，这似乎是不可能的。屏幕分辨率是主要原因，但也取决于他们的窗口有多大。起初，您可能认为您可以计算鼠标相对于固定点的位置，div如图所示（以 Stack Overflow 为例，站点的主容器不会随浏览器窗口调整大小）。但是如果他们的窗口比容器小，你就会对他们看到的东西做出一些错误的假设。

话虽如此，您始终可以只计算鼠标相对于您知道将在屏幕上显示的固定元素的位置，$.offset()并假设它们的屏幕显示所有内容（或检查$(window)大小）并使用“正常”查看条件。