未成功，尝试使用 clientX 设置 html 元素的位置

Question

我有两个 div 元素和一个 img 元素：

    <div class="game-container">

      <div class="bubble-container">

    <img src="https://raw.githubusercontent.com/diegoleonardoro/bronx_tourism/master/line.png" class="line" width="128"
        height="12" />
    </div>

  </div>

在我的 JavaScript 中，我正在尝试向 div "game-container" 添加一个事件侦听器。这个事件侦听器应该为图像标签添加一些运动，如下所示：

  var yellowBox = document.querySelector(".game-container");
  var line = document.querySelector(".line");

yellowBox.addEventListener("mousemove", function (e) {

    var r = e.clientX;

    line.style.left = r + "px";
    line.style.left = r + "px";

    console.log("Black Line", line.getBoundingClientRect());
    console.log("r", r);

})

我期望的结果是当我移动鼠标时变量r 与变量line 相同的结果。但是，这不是我得到的。当我移动缪斯时，这两个元素的位置是不一样的。如果检查两个控制台日志，这就是我得到的：

console.log("Black Line", line.getBoundingClientRect());:

console.log("r", r);

提前致谢！

Answer 1

我可以通过减去 console.log("r", r) 的结果差来修复它；和 console.log("Black Line", line.getBoundingClientRect().left) ;

的结果

我不明白我为什么要做这个减法。如果有人有任何见解，请分享。

未成功，尝试使用 clientX 设置 html 元素的位置

Unsuccessfully, trying to set the position of an html element using clientX

html

javascript

mouseover

addeventlistener