问题

我遇到了一个小问题，我编写了一些代码，其中我已经自动化了一个脚本来跟踪用户与 UI 的交互，包括mousemove&click事件。如果我不必担心让它响应，那么我可能会称之为一天并交付我已经完成的工作，但是我的大脑正在寻找一些巫术知识，我正在努力使其超级响应. 这只是我正在做的事情的一个简单示例，它不是天才，如果有的话，主要是heatmap.js正在做繁重的工作。目前我只是想看看我是否可以将其作为概念证明而不是其他任何东西......

编码

所以目前，我正在跟踪event.pageX&event.pageY值以准确存储事件发生的位置，我也在存储window.innerWidth&window.innerHeight值以尝试和计算出一些允许我根据大小偏移位置的函数其他设备。

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

无论如何，不​​用多说，下面是一些示例代码：

// A lot of other code...

var setupHeatMaps = function (pages, heatMaps) {
  pages.forEach(function (page) {
    page.addEventListener("click", function (event) {
      heatMaps.push({ x: event.pageX, y: event.pageY, value: 10000 });
      onStateChange();  
    });

    // Don't collect ALL mouse movements, that'd be crazy, so collect 
    // every 1/10 mouse movements.
    var counter = …