试图使用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)的结果的差值，就能解决这个问题。

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