一千萬個為什麽

搜索

單擊熱圖和鼠標坐標! - Javascript

我正在嘗試為我的一個網站構建一個簡單的熱圖,但我認為這似乎更棘手!

1) There are different themes for the site, 1 is aligned to the left, another one is aligned to the centre.

2) Screen sizes change throughout the users.

我需要跟蹤網站上的點擊次數,但不幸的是,event.PageX和event.PageY是在考慮整個屏幕的情況下計算的。


例子

在第一個例子中,坐標[300,500]的點擊可能位於大猩猩周圍的某個地方(也許是他的鼻孔!=))。

alt text

In this other example a click with coordinates [300. 500] will probably be located somewhere outside the main content area!

alt text


底線: 我該如何解決這個問題,以便建立一個準確的DIY點擊熱圖?

知道這真的很有趣!多謝你們! =)

最佳答案

1)只需將當前主題與坐標一起傳遞。

2)獲取主要內容區域的相對鼠標位置 。這樣可以避免不同瀏覽器寬度/高度的不同位置問題。

用於鼠標位置的jQuery文檔中有一個特殊部分(如果您要使用它)對這個:

(註意,像素值給出的是   相對於整個文件。如果   你想計算位置   在特定元素內或內部   視口,你可以看看offsetY   和offsetX,並做一點   算術找到相對值。

     

這是一個尋找的例子   特定元素內的位置   而不是頁面:

$("#special").click(function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    $('#status2').html(x +', '+ y);
});

話雖這麽說,也許是矯枉過正; Google Analytics 也有熱圖功能。

轉載註明原文: 單擊熱圖和鼠標坐標! - Javascript