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

Mapping mouse click coordinates on heatmap for different resolution & screen sizes in JS/Jquery

本文关键字：amp 分辨率 JS 屏幕 Jquery 映射 鼠标 坐标      更新时间：2023-09-26

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

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

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

找不到相对于文档的坐标在桌面点击中效果很好，但在手机点击中效果不佳。你可以设置一个条件来避免手机点击，也可以用不同的方式记录。

相关文章：