0

我跟踪我网站上的点击次数。对于每次点击，我都会使用以下函数获取点击元素上的点击坐标（由返回 css 路径的函数 getPath 引用）：

add_click(event) {
      var element = event.target;
      var dimensions = element.getBoundingClientRect();
      var click = {
        width: window.innerWidth,
        height: window.innerHeight,
        path: getPath(element),
        x: event.offsetX / dimensions.width,
        y: event.offsetY / dimensions.height,
        key: event.which
      };
      this.clicks.push(click);
    }

然后我正在创建点击的可视化。为此，我将元素的 X 和 Y 坐标重新转换为窗口的 X 和 Y 坐标。为此我使用：

var element = document.querySelector(path); //return the clicked element
var rect = element.getBoundingClientRect();
var X = rect.left + click["x"] * rect.width;
 var Y = rect.top + click["y"] * rect.height;

但是 getBoundingClientRect() 每次加载页面时都不会为元素返回相同的值。从 getBoundingClientRect() 返回的相同元素的值不断变化，这为我的点击创建了错误的坐标。

我已经在 Chrome 87 和 Firefox 78 上对其进行了测试，两者都为相同的确切窗口大小返回不同的 getBoundingClientRect() 值。

有谁知道为什么会发生这种情况，之前遇到过这个错误，或者有另一个未被破坏的函数来获取 DOM 元素的坐标？

4

0 回答 0