如何用JavaScript将HTML图像移动到点击位置

Question

我正在尝试移动一个HTML图像（一个黑色标记）到我点击屏幕上的地图的地方。地图有一个onclick功能，它使标记可见，并移动到用户点击的地方。然而，目前这只适用于我正在使用的屏幕大小，每当改变窗口大小时，图像就会在每个轴上偏离几百像素。

目前，我将点击的坐标存储在数组中，并使用DOM style.left/top来更改位置，使用这些坐标加上一组对我有效的像素，而不是任何其他屏幕。我想有一种方法，让它移动到用户点击的任何地方，不管页面的尺寸。

这是我当前的工作方式,coords是包含相对坐标的数组：

document.getElementById('black-marker').style.visibility = 'visible';
document.getElementById('black-marker').style.left = coords[0]-20;
document.getElementById('black-marker').style.top = coords[1]+205;

Answer 1

在红色方框中点击，黑色圆圈将移动到鼠标点。

我得到了红色框的位置和鼠标位置，并用它们为黑色框计算相对位置。

null

const blackMarker = document.getElementById('black-marker');
const parent = blackMarker.parentElement;

parent.addEventListener('click', e => {
  const {
    x,
    y
  } = parent.getBoundingClientRect();
  blackMarker.style.left = `${e.clientX - x}px`;
  blackMarker.style.top = `${e.clientY - y}px`;
});

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: red;
}

span {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 25px;
  border-radius: 50%;
  height: 25px;
  background-color: black;
}

<div>
  <span id="black-marker"></span>
</div>