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

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

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

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

例子

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

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

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

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

解决方法:

1)只需将当前主题与坐标一起传递.

2)获取主要内容区域的relative mouse position.这样可以避免不同浏览器宽度/高度的不同位置问题.

jQuery docs for Mouse Position中有一个特殊的部分(如果您使用它)：

(Note that the pixel values give are
relative to the entire document. If
you want to calculate the position
within a particular element, or within
the viewport, you can look at offsetY
and offsetX, and do a bit of
arithmetic to find the relative value.

Here is an example of finding the
position within the particular element
rather than the page:

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

话虽这么说,也许是矫枉过正; Google Analytics也有热图功能.