使用JavaScript点击移动robot div无报错不生效问题求助

• 错误使用只读属性：clientTop、clientLeft属于DOM元素的只读属性，仅用于读取元素的边框偏移值，对这两个属性赋值不会产生任何效果，浏览器也不会抛出报错。
• 元素未开启定位：当前.robot元素使用默认的static静态定位，该定位模式下top、left等位置控制属性完全不生效。
• 坐标对应逻辑错误：event.pageX是鼠标点击的水平坐标，对应元素的横向位置left；event.pageY是鼠标点击的垂直坐标，对应元素的纵向位置top，你的代码把二者的对应关系写反了。

1. 修改CSS代码 #

给.robot添加定位属性，调整定位相关的边距设置：

.robot {
  background-color: rgb(10, 0, 143);
  height: 120px;
  width: 120px;
  border-radius: 15px;
  /* 开启绝对定位 */
  position: absolute;
  /* 可选：初始位置设置，替换原有margin:25px auto */
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
}

2. 修改JS代码 #

改用可写的style属性控制元素位置，修正坐标对应关系：

document.addEventListener('mousedown', function(event) {
  let robot = document.querySelector('.robot');
  // 可选：减去宽高的一半，让元素中心对齐点击位置
  robot.style.left = event.pageX - 60 + 'px';
  robot.style.top = event.pageY - 60 + 'px';
});

原有HTML代码无需调整，可正常保留。

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