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

Question

我正在尝试为我的一个站点构建一个简单的热图，但是我认为它似乎更复杂！

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

2）整个用户的屏幕尺寸发生变化。

我需要跟踪网站上的点击次数，但不幸的是，event.PageX和event.PageY会根据整个屏幕进行计算。

---

例子

在第一个例子点击坐标[300，500]可能会被周围设大猩猩的地方（也许他的鼻孔！=））。

在这种其它示例具有坐标[300点击。 500]可能会位于主要内容区域之外的某个地方！

---

底线： 我怎样才能解决这个问题，这样我就可以建立一个准确的DIY点击热图？

这将是真正有趣的知道！多谢你们！ =）

Answer 1

1）只需传递当前主题以及坐标。

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

有一个在jQuery docs for Mouse Position一个特殊的部分（如果你使用它）这一点：

（注意，像素值给出的 相对于整个文档如果 要计算。一个特定的元素中的位置 ，或在 视口，你可以看看OFFSETY 和OFFSETX，并做一点 算术找到相对值。

这里找到012例特定元素中位置 而非页面：

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

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

Answer 2

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

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

Answer 3

不是为每次点击存储绝对合作伙伴，您可以根据潜在对象（即大猩猩）存储每次点击的可靠合作伙伴。

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

要做到这一点，您只需抓住每次点击的“目标”对象（这是事件参数的'target'属性），并从点击共同点减去它的共同点。