Question

我想从网页上收集鼠标点击数据，该网页可以通过不同的分辨率访问。屏幕尺寸设备并精确地在覆盖图上映射这些点击坐标以显示热图。我怎么能在JavaScript / jQuery中做到这一点？此外，考虑到当正在显示的页面可以向上/向下滚动并且浏览器窗口随时由用户调整大小的情况，从而改变屏幕上DOM元素的相对位置。例如，我有一个主div包装器作为文件的容器和两个div作为列内部。通常，列将在包装器div内彼此并排显示。但是，当用户将页面调整为较小的尺寸时，右侧的列将移动并位于第1列下方。因此，它的X和Y偏移量已根据页面而改变。现在，如果用户点击此第二列，当我在整页视图中看到设备上的热图时，点击将无法准确映射到屏幕我是初学者，所以我需要了解详细信息。

Answer 1

我正在做同样的事情来收集点击坐标以在热图上绘制。我使用的方法是获取点击坐标并将它们转换为相对于文档的像素平均值，然后再绘制时将它们转换为坐标。

window.addEventListener("click",function(){

    var posx = 0;
    var posy = 0;
    TotalX = document.body.scrollWidth; 
    TotalY = document.body.scrollHeight;
    if (!e) {
        var e = window.event;
    }
    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    console.log("X" + ((posx * 100)/TotalX)); //Just For Debugging
    console.log("Y" + ((posy * 100)/TotalY)); // For Debugging
    return {
        x : ((posx * 100)/TotalX),
        y : ((posy * 100)/TotalY)
    };

});

找不到与文档相关的坐标在桌面点击中的效果非常好，但与移动点击无关。您可以设置条件以避免移动点击，或者可以以不同方式记录它们。

在热图上映射鼠标点击坐标以获得不同的分辨率＆amp; JS / Jquery中的屏幕大小

1 个答案: