javascript - 在 JS/Jquery 中针对不同分辨率和屏幕尺寸在热图上映射鼠标点击坐标

Question

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

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

});

找不到相对于文档的坐标，在桌面点击中效果很好，但在移动设备点击中则不然。您可以设置一个条件来避免移动点击，或者可以以不同的方式记录它们。