Question

有人知道如何添加单击鼠标位置的点吗？使用打字稿（或）JavaScript代码。

我认为对于解决方案我有些了解，但是我不知道如何实现。我知道的是如何在特定点获得X坐标和Y坐标，而我不知道的是如何实现该坐标。

    function getClickPosition(e) {
     var xPosition = e.clientX;
     var yPosition = e.clientY;
    }

Answer 1

该片段演示了一种快速方法

function getClickPosition(e) {
  var p = {
    x: e.clientX,
    y: e.clientY
  }
  drawAt(p);
  return p
}

function drawAt(point) {
  var dotSize = 10; // in px
  var div = document.createElement('div');
  div.style.backgroundColor = "#000"
  div.style.width = dotSize + "px";
  div.style.height = dotSize + "px"
  div.style.position = "absolute"
  div.style.left = (point.x - dotSize / 2) + "px"
  div.style.top = (point.y - dotSize / 2) + "px"
  div.style.borderRadius = "50%"
  root.appendChild(div);
}

document.getElementById("root").addEventListener('click', function(e) {
  getClickPosition(e);
})

<div id="root" style="width: 400px; height: 300px; background-color: #ccc"></div>

但是，您可能想看一下HTML画布

如何在点击的地方添加点？

1 个答案: