鼠標位置和偏移量

我在某些網頁上獲取鼠標座標並保存。鼠標位置和偏移量

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

    // save x,y 

});

現在其他人加載相同的頁面，我想向他們展示相同的座標（x，x位置）。

如果我不得不考慮div＃容器與我在瀏覽器中的位置不同（考慮屏幕分辨率和滾動），我該如何得到相同的點？

來源

2012-08-27 mgalesic

相對於#container或瀏覽器窗口的相同點？ – David

我認爲相對於容器更好，因爲容器可以左右移動，如果屏幕分辨率發生變化 – mgalesic

由於您在問題中提到的變量，這看起來不可行。屏幕分辨率是主要原因，但也取決於窗戶的大小。起初，您可能會認爲您可以計算鼠標相對於固定點的位置，例如顯示div（以Stack Overflow爲例，其中站點的主容器不會隨瀏覽器窗口調整大小）。但是如果他們的窗戶比容器小，你會對他們看到的東西做出一些錯誤的假設。這就是說，你總是可以計算相對於固定元素的鼠標位置，你知道將會在屏幕上使用$.offset()，並假設他們的屏幕顯示了一切（或檢查$(window)大小），並使用「正常」查看條件。

來源

2012-08-27 13:14:48

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

然後，其他用戶顯示器上，顯示的座標將它們添加到自己的偏移後。

來源

2012-08-27 13:12:48 Ohad

好的答案，但如果您通過緩存變量提供更簡潔的代碼會更好。所以只需做$（this）一次，只做$ .offset（）一次。（你可以忽略 - =一共） – Sjeiti

謝謝你的建議！我欣賞對細節的關注並相應地改變它。 – Ohad

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

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

他們對。減去和e.pageXe.pageY。

offset()函數爲您提供了相對於文檔的匹配元素位置（請參閱docs），因此如果用戶向下滾動，則沒有問題。

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

來源

2012-08-27 13:15:24

鼠標位置和偏移量

回答

相關問題