1

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

4

1 回答 1

0

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

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

});

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

于 2016-08-03T18:06:09.707 回答