Javascript 响应热图 问题

我遇到了一个小问题，我编写了一些代码，其中我自动编写了一个脚本来跟踪用户与UI的交互，包括&事件。如果我不必担心它的响应性，那么我可能就到此为止&把我已经完成的工作发出去，然而我的大脑正在寻找一些魔法知识，我正在努力使它超响应。这里只是一个简单的例子，我正在做的这类事情，它不是天才，如果我有什么的话，它主要是做重物。目前，我只是想看看我是否可以做这件事，作为概念的证明，而不是其他任何事情

代码 因此，目前，我正在跟踪

事件.pageX

和

事件.pageY

值，以准确存储事件发生的位置，我还存储

窗口.innerWidth

和

窗口.innerHeight

值，以尝试和开发一些功能，允许我根据其他设备的大小偏移位置

例如，如果您查看上面的示例图像，这非常适合静态页面，但如果我要说的是使页面更窄一点，您可以在这里看到它与上面的图像不一致：

无论如何，在不说太多的情况下，下面是一些示例代码：

//还有很多其他代码。。。
var setupHeatMaps=函数（页面、热图）{
pages.forEach（函数（第页）{
page.addEventListener（“单击”），函数（事件）{
推送（{x:event.pageX，y:event.pageY，值：10000}）；
onStateChange（）；
});
//不要收集所有的鼠标移动，那太疯狂了，所以收集吧
//每移动1/10次鼠标。
var计数器=0；
page.addEventListener（“mousemove”，函数（事件）{
如果（计数器==10）{
推送（{x:event.pageX，y:event.pageY，value:20}）；
onStateChange（）；
计数器=0；
}否则{
计数器++；
}
});
});
};
//很多其他的代码。。。
//Curried函数，这样就可以在不暴露状态的情况下传递它。。。
var renderHeatMaps=函数（热图）{
返回函数（）{
var max=热图。长度；
var点=热图；
var parent=getParentElement（）；
var styleObj=window.getComputedStyle（父级）；
var div=document.createElement（“div”）；
var body=document.querySelector（“body”）；
var background=document.createElement（“div”）；
//该元素需要位于
//背景元素，因此z索引值较高。
div.style.position=“绝对”；
div.style.zIndex=9；
div.style.left=“0px”；
div.style.top=“-80px”；
div.style.width=“100vw”；
//即使该元素将位于元素后面
//在上面创建的元素中，我们仍然希望该元素
//坐在页面上99%的内容前面。
background.style.position=“固定”；
background.style.top=“0px”；
background.style.left=“0px”；
background.style.height=“100vh”；
background.style.width=“100vw”；
background.style.zIndex=5；
background.style.backgroundColor=“rgba（255,255,255,0.35）”；
setAttribute（“id”，“报价客户热图背景”）；
var heightInPx=styleObj.getPropertyValue（“高度”）；
var rawHeight=parseInt（heightInPx.replace（“px”）和“）；
var newHeight=parseInt（（原始高度+80））；
div.style.height=newHeight+“px”；
div.setAttribute（“id”，“报价客户热图前景”）；
body.style.paddingBottom=“0px”；
儿童（背景）；
附体儿童（div）；
var热图=h337.0创建({
货柜组:分区，
半径：45
});
setData（{max:max，data:points}）；
};
};
//很多其他的代码。。。

由于在

setupHeatMaps

中使用的

页面

元素的宽度发生变化，因此查看此数据的偏移非常严重。老实说，我昨天花了很多时间思考这个问题&我仍然没有想到任何似乎合理的事情

或者 我想知道我是否应该以某种方式将页面存储为一个图像，并将热图过度显示，这样我就不必担心热图的响应性了。但是我需要弄清楚其他一些事情。。。例如，对这些数据进行版本控制，以便在用户在其手机上查看页面的情况下，将这些数据单独存储到他们在笔记本电脑或台式机设备上的前一次会话中收集的数据中

结论 老实说，我不完全确定最好的做法是什么，你们有没有遇到过类似的情况？你们有没有想过什么天才可以解决这样的问题

---

p.S.我会分享更多的代码，但是这个整体解决方案中有大量的代码，所以我不能全部分享，我敢肯定Stackoverflow的人会因此恨我 也许您可以更改设置并记录事件所在的元素，并保存相对于该元素的位置数据，而不是整个页面。 您仍然会在页面上记录所有事件，但会保存与元素相关的数据，而不是整个页面，这会阻止您在查看热图时将数据混合在一起 它以不同的宽度覆盖您的网站

假设您在伪代码中有这样的设置：

@1000px width
[html width 1000px, height 500px
  [div width 800px, height 400px centered
    [button1 width 100px, height 30px centered] 
  ]
]

@500px width
[html width 500px, height 1000px
  [div width 400px, height 800px centered
    [button1 width 80px, height 30px centered]
  ]
]

您的用户总是在某些元素上移动。只需像这样捕获数据，两个不同屏幕大小的用户的示例数据将光标移向中间的按钮：

user interaction{
  over element: html {dimensions: width 1000px, height 500px}
  user position: {x 900, y 20}
}

user interaction{
  over element: html {dimensions: width 1000px, height 500px}
  user position: {x 850, y 60}
}

user interaction{
  over element: div {width 800px, height 400px}
  user position: {x 700, y 60}
}

user interaction{
  over element: button1 {width 100px, height 30px}
  user position: {x 90, y 10}
}

user interaction{
  over element: html {dimensions: width 500, height 1000px}
  user position: {x 450, y 100}
}

user interaction{
  over element: div {width 400px, height 800px}
  user position: {x 380, y 40}
}

user interaction{
  over element: button1 {width 80px, height 30px} 
  user position: {x 60, y 10}
}

然后，当你查看你的网站时，在所有元素上绘制热图，并计算捕获数据的相对位置。 因此，当您以@500px的宽度查看站点时，按钮1上的热量如下所示：

[button 1 width 80px, height 30px
heat 1, x 72px y 10
heat 2, x 60px y 10
]

对所有其他元素也一样。我不知道这些数据有多有用