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

Question

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

javascriptjqueryhtmlcssheatmap

4

我正在尝试为我网站之一创建一个简单的热图，但它似乎比我想象的要棘手得多！

1）网站有不同的主题，其中1个左对齐，另一个居中。

2）屏幕尺寸随用户而变化。

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

示例

在第一个示例中，坐标为[300，500]的点击可能位于猩猩的某个位置（也许是他的鼻孔！=））。

在这个示例中，坐标为[300.500]的点击可能会位于主内容区域之外！

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

这将非常有趣！谢谢大家！=)

- RadiantHex

3个回答

5

与其存储每个点击的绝对坐标，您可以基于底层对象（例如猩猩）存储每个点击的相对坐标。

然后，在显示热图时，您会以分辨率为基础将点击相对于每个对象进行显示。

要做到这一点，您只需要获取每个点击的“目标”对象（这是事件参数的“目标”属性），并从点击坐标中减去它的坐标即可。

- Toby

有趣且耳目一新的想法！我喜欢这个概念，我会考虑一下 =) - RadiantHex

这是一个非常好的想法，我相信它可以进行一些概括！例如，大猩猩可以用作地标，因为它将成为内容包装器中的一部分，所有点坐标都可以与其相关联。问题现在是，让代码在地标上达成一致！ =） - RadiantHex

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

- Anpher

谢谢！有没有什么聪明的方法可以让Javascript理解包装器是哪个div？ - RadiantHex

@RadiantHex，将其id设置为'wrapperDiv'。 - Daniel Sloof

@Daniel：嗨，丹尼尔，我在你的回复下留了言。 :) 如果我能想出一种动态理解div包装器的方法，那就太好了。我认为有一组固定的居中包装器的方法，例如文本对齐和将div设置为内联块。因此，我认为我可以用JavaScript查找这个，但我相信可能还有其他实现这个的方法，这可能会减慢我的速度。 - RadiantHex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel Sloof · Accepted Answer

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