JavaScript实现点击容器移动元素到点击位置时元素无响应求助

问题排查与修复方案 #

你代码里存在4个影响功能的问题，按优先级排序如下：

• 脚本加载顺序错误：如果你的JS代码放在<head>标签内，DOM还未渲染完成就执行，querySelector会返回null，事件绑定直接失败，这是最可能导致点击完全无响应的原因。你可以把JS代码移到</body>闭合标签之前，或者用DOM加载完成事件包裹逻辑：

document.addEventListener('DOMContentLoaded', function() {
  // 原有JS逻辑全部放在此处
})

• JS语法错误：yPosition赋值行多写了分号，导致代码执行中断。原代码：

var yPosition = e.clientY; - (theGirl.offsetHeight / 2)

删除多余分号修改为：

var yPosition = e.clientY - (theGirl.offsetHeight / 2)

• transform属性值非法：拼接translate3d参数时x和y坐标之间缺少逗号，生成的属性值不符合浏览器规范，无法生效。原拼接代码：

var translate3dValue = "translate3d(" + xPosition + "px" + yPosition + "px, 0)";

添加逗号修改为：

var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px, 0)";

• 坐标偏移问题：你当前使用的clientX/clientY是相对于整个浏览器窗口的坐标，如果#floor容器不在页面左上角，点击位置会出现偏移。建议改为相对于容器的坐标，同时调整布局避免溢出：
  1. CSS中给#floor添加position: relative，给#girl添加position: absolute
  2. 坐标计算改为：

  var xPosition = e.offsetX - (theGirl.offsetWidth / 2);
  var yPosition = e.offsetY - (theGirl.offsetHeight / 2);
  

完整修正后代码 #

HTML

<body>
  <div id="floor">
    <img src="girl.png" id="girl">
  </div>
  <!-- JS放在body末尾 -->
  <script>
    var theGirl = document.querySelector("#girl");
    var container = document.querySelector("#floor");
    container.addEventListener("click", getClickPosition, false);

    function getClickPosition(e) {
      var xPosition = e.offsetX - (theGirl.offsetWidth / 2);
      var yPosition = e.offsetY - (theGirl.offsetHeight / 2);
      var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px, 0)";
      theGirl.style.transform = translate3dValue;
    }
  </script>
</body>

CSS

#floor {
  width: 700px;
  height: 600px;
  cursor: pointer;
  overflow: hidden; /* 超出容器的图片部分隐藏 */
  border: 10px #EDEDED solid;
  position: relative;
}

#girl {
  height: 450px;
  width: 200px;
  border: 15px red solid;
  transform: translate3d(50px, 50px, 0);
  position: absolute;
}

内容的提问来源于stack exchange，提问作者coolguy89