鼠标位置和偏移量

时间:2012-08-27 13:05:39

标签: javascript jquery mousemove

我在某个网页上获取鼠标坐标并保存。

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

  // save x,y

});

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

如果我必须考虑div#容器与浏览器中的位置不同(考虑屏幕分辨率和滚动),我怎么能得到同样的观点呢?

3 个答案:

答案 0 :(得分:6)

我会使用父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.
});

然后,在其他用户显示屏上,将其添加到偏移后显示坐标。

答案 1 :(得分:0)

由于您在问题中提到的变量,这似乎不可能。屏幕分辨率是主要原因,但也取决于它们的窗口有多大。首先,您可能认为可以计算鼠标相对于固定点的位置,例如显示的div(例如,使用Stack Overflow,其中站点的主容器不会随浏览器窗口调整大小) 。但如果他们的窗口小于容器,你会对他们所看到的内容做出一些错误的假设。

话虽这么说,你可以随时只计算相对于你知道屏幕上使用$.offset()的固定元素的鼠标位置,并假设他们的屏幕显示所有内容(或检查$(window)大小)并正在使用“正常”观看条件。

答案 2 :(得分:0)

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

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

将它们减去e.pageXe.pageY

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

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