javascript - 单击热图和鼠标坐标! - Javascript

Question

我正在尝试为我的一个网站构建一个简单的热图，但它似乎比我想象的要复杂得多!

1) 网站有不同的主题，一种是左对齐，另一种是居中。

2) 屏幕尺寸随用户变化。

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

---

例子

在第一个示例中，坐标为 [300, 500] 的点击可能位于 gorilla 周围的某处(可能是他的鼻孔!=))。

在另一个示例中，点击坐标 [300. 500] 可能位于主要内容区域之外的某个地方!

---

底线: 我该如何解决这个问题，以便构建准确的 DIY 点击热图？

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

Answer 1

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