点击热图和鼠标坐标! - Javascript

Question

我正在尝试为我的一个网站构建一个简单的热图,但我认为这似乎更棘手!

1)网站有不同的主题,1与左边对齐,另一个与中心对齐.

2)屏幕尺寸在整个用户中发生变化.

我需要跟踪网站上的点击次数,但不幸的是,event.PageX和event.PageY是在考虑整个屏幕的情况下计算的.

例子

在第一个例子中,坐标[300,500]的点击可能位于大猩猩周围的某个地方(也许是他的鼻孔!=)).

替代文字

在另一个例子中,点击坐标为[300.500]可能会位于主要内容区域之外的某个地方!

替代文字

底线:我如何解决这个问题,以便我可以建立一个准确的DIY点击热图？

知道这真的很有趣!多谢你们!=)

Answer 1

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也有热图功能.

Answer 2

您可以根据底层对象（即大猩猩）存储每次点击的相对坐标，而不是存储每次点击的绝对坐标。

然后，在显示热图时，您会以您的分辨率显示相对于每个对象的点击次数。

为此，您只需获取每次点击的“目标”对象（这是事件参数的“目标”属性）并从点击坐标中减去它的坐标。