確定鼠標點擊所有的屏幕分辨率

我有一些簡單的JavaScript，決定在那裏點擊這裏發生在瀏覽器中：確定鼠標點擊所有的屏幕分辨率

var clickDoc = (document.documentElement != undefined && document.documentElement.clientHeight != 0) ? document.documentElement : document.body; 
    var x = evt.clientX; 
    var y = evt.clientY; 
    var w = clickDoc.clientWidth != undefined ? clickDoc.clientWidth : window.innerWidth; 
    var h = clickDoc.clientHeight != undefined ? clickDoc.clientHeight : window.innerHeight; 
    var scrollx = window.pageXOffset == undefined ? clickDoc.scrollLeft : window.pageXOffset; 
    var scrolly = window.pageYOffset == undefined ? clickDoc.scrollTop : window.pageYOffset; 

    params = '&x=' + (x + scrollx) + '&y=' + (y + scrolly) + '&w=' + w + '&random=' + Date();

所有這些數據都被存儲在一個數據庫。稍後我會檢索它並顯示該頁面上發生的所有點擊。如果我在一個分辨率中完成所有的點擊操作，並且以相同的分辨率顯示回來，這可以正常工作，但情況並非如此。可能會使用大量的分辨率。

在我的測試案例中，我點擊屏幕分辨率爲1260x1080的屏幕。我檢索了所有數據並以相同的分辨率顯示。但是，當我使用不同的顯示器（嘗試1024x768和1920x1080。標記轉移到不正確的點

我的問題是，如果我存儲客戶端的寬度和高度，和點擊x/y位置如果3個不同屏幕分辨率的用戶點擊同一個單詞，第4個用戶會查看所有這些點擊發生的位置，我如何正確繪製x/y位置以顯示每個人都在同一空間點擊，無論分辨率是多少？

如果這屬於一個更好的部分，請讓我知道爲好。

:::編輯:::應用Brock的建議後，我附上兩張截圖，我點擊了在每個段落的開頭部分以不同的分辨率表示「If」字樣。當以這兩種分辨率觀看時，以相同分辨率發生的點擊直接在該詞上，當分辨率更高或更低時，它們分別向右或向左移動。

http://img291.imageshack.us/img291/5682/1260x1080.png http://img27.imageshack.us/img27/8950/1920x1080c.png

來源

2010-06-12 Nathan

我不知道你的要求，但如果這對你是可能的，考慮記錄DOM元素的路徑被點擊而不是鼠標的位置。 – 2010-06-12 21:22:35

從這些截圖中，它看起來像邊距是不同的。張貼整個屏幕截圖或 - 更好地 - 鏈接到頁面。我會在下面更新我的答案。 – 2010-06-12 23:12:37

更新：
其他要考慮的問題，這個問題可能不是完全可解...

在不同的屏幕尺寸，諸如此類的利潤率（爲中心的內容）會有所不同。需要調整到「屏幕尺寸」真正成爲clientWidth後補償利潤率的變化。
另外，儘管如此，在不同的屏幕分辨率（加上用戶瀏覽器窗口的大小）下，頁面可能呈現不同的效果。如果這會導致換行方式不同，它會真正拋棄比較。

原來的答案：

「如果我儲存在客戶端的寬度和高度，然後單擊的X/Y位置。如果3個不同屏幕分辨率的用戶點擊同一個單詞，並且第4個用戶查看所有這些點擊發生的位置，我如何正確繪製x/y位置「

這應該是簡單的縮放問題

僞代碼：
考慮：

CapturedMousePosition = {X and Y coordinates of logged machine, in pixels} //-- EG [42, 69] 
CapturedScreenSize  = {width and height of logged machine, in pixels}  //-- EG [1260, 1080] 
TargetScreenSize  = {width and height of display machine, in pixels}  //-- EG [1024, 768] 
/*-- Note that client size and/or view-port size, are what we mean by "screen size" here. 
    This is because the browser will use some unknown fraction of the PC's display resolution. 
*/

然後：

TargetMousePosition  = CapturedMousePosition * TargetScreenSize/CapturedScreenSize 
EG: [42 * 1024/1260, 69 * 768/1080] -- Be sure to round to *nearest* integer.

來源

2010-06-12 21:45:37

我很近，但這裏是它的立場。我點擊了1260x1080中的一個單詞。我點擊1920x1080的另一個字。然後我顯示1260x1080的熱圖。查看來自同一分辨率的點擊數很好，但是來自較高分辨率的點擊數向右移動了2個字（6個字符）。以1920x1080查看時，查看以相同分辨率拍攝的點擊數是正確的，但以較低分辨率拍攝的點擊數左移大約相同的距離。 – Nathan 2010-06-12 22:51:23

更新了有問題圖片的原始帖子。 – Nathan 2010-06-12 23:02:41

頁面在不同的屏幕尺寸下呈現的方式可能略有不同嗎？它看起來像你正在使用'clientWidth'和'clientHeight'而不是實際的屏幕大小 - 所以不應該是這樣。發佈一個鏈接到頁面或至少一些屏幕截圖。 6個字符也可疑地接近滾動條的寬度。 – 2010-06-12 23:07:58

如果你需要的地方存放在用戶點擊該文件中，你現在正在做的應該沒問題。

如果您需要將位置存儲在瀏覽器窗口中（爲什麼？），您還必須存儲瀏覽器分辨率或基於分辨率的標準化值。

來源

2010-06-12 21:24:47

我正在創建一個熱圖來監視用戶活動，它可以在一個分辨率下正常記錄和顯示。試圖確保所有的點擊都是準確的。 – Nathan 2010-06-12 22:35:32

確定鼠標點擊所有的屏幕分辨率

回答

相關問題