单击热图和鼠标坐标！-Javascript

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

1） 该站点有不同的主题，1个与左侧对齐，另一个与中心对齐。

2） 整个用户的屏幕大小都会发生变化。

我需要跟踪网站上的点击，但不幸的是event.PageX和event.PageY的计算考虑了整个屏幕

---

例子 在第一个例子中，坐标为[300500]的点击可能位于大猩猩周围的某个地方（可能是他的鼻孔！=）

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

---

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

---

这将是非常有趣的知道！谢谢大家

这是我的代码。它只在页面包装器中记录点击（而不是后台文件）。所以你只能得到相对位置

$(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
      });
    }
  });
});

$（函数（）{
var o=$（“#wrapperDiv”）；//页面包装器div
var lf=o.offset（）.left；//包装器左位置
var lt=lf+o.width（）；//包装器右位置
$（文档）。单击（函数（e）{//将单击事件绑定到整个页面
var x=e.pageX；//鼠标x位置
如果（x>=lf | | x1），只需将当前主题与坐标一起传递即可

2） 获取主内容区域的位置。这样可以避免不同浏览器宽度/高度的不同位置的问题

关于这一点，手册中有一个特别的部分（如果您要使用它的话）：

（注意，给出的像素值为
相对于整个文档。如果
你想计算位置吗
在特定元素内，或在
在视口中，可以查看偏移
和offsetX，再做一点
求相对值的算术运算

下面是一个查找
在特定元素中的位置
而不是页面：

也就是说，可能是过度杀戮；也有热图功能。
您可以根据底层对象（即大猩猩）存储每次点击的相对坐标，而不是存储每次点击的绝对坐标

然后在显示热图时，以您的分辨率显示相对于每个对象的单击

要做到这一点，您只需抓取每次单击的“target”对象（这是事件参数的“target”属性）然后从点击词条中减去它的词条。
谢谢！有什么聪明的方法可以让Javascript理解包装器的div吗？@RadiantHex，通过将其id设置为“wrapperDiv”。@Daniel:嗨，Daniel，我对你的精彩回复发表了评论。：）如果我能想出一种方法来动态地理解什么是div包装器，那就太好了。我认为有一套固定的方法可以使包装器居中，例如文本对齐和将div设置为内联块。所以我认为我可以用Javascript来寻找这一点，但我相信可能还有其他方法可以实现这一点，这很好让我慢下来。有趣又令人耳目一新的想法！我喜欢这个概念，我会考虑一下=）这是一个非常好的主意，我相信它也可以推广一点！例如，大猩猩可以被用作一个地标，因为它无论如何都会在内容包装中，所有的点坐标都可以与之相关。问题是，现在，让代码在地标上达成一致！=）非常感谢您的回复！我真的需要找到一种方法要用Javascript识别内容包装器，强制或查找每个主题的id会有点复杂。在每个主题中粘贴一些Javascript代码会容易得多。顺便说一句，这是我第一次使用荷兰语编写的Google Analytics！=）@RadiantHex:以silverbackapp.com为例，你的内容apper div具有类“content”。如果使用jQuery，则可以使用“.content”（而不是#special）作为它的目标。
$("#special").click(function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    $('#status2').html(x +', '+ y);
});