单击热图和鼠标坐标！ - 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

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

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

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

Answer 3

这是我的代码。它仅记录页面包装内的点击（而不是背景内容）。所以你只能得到相对位置。

$(function(){
  var o = $("#wrapperDiv"); // page wrapper div
  var lf = o.offset().left; // wrapper left position
  var lt = lf+o.width(); // wrapper right position
  $(document).click(function(e){ // bind click event to whole page
    var x = e.pageX; // mouse x position
    if(x >= lf || x <= lt){ // was the click inside wrapper div?
      $.get("heatmap.php", { // send ajax request to server width:
        x: x-lf, // x position of page
        y: e.pageY, // y position of page
        url: document.location.href.replace('http://'+document.domain, '') // request uri
      });
    }
  });
});