如何在点击时显示图像，确切地说是单击发生的位置？

Question

我想在单击画布区域时添加图像。我更喜欢使用jquery但是vanilla js或css很好。问题是，我可以使用点击和附加添加点击功能，但它不会出现在我点击的确切位置，这就是我想要发生的事情。我也试图在click事件中添加一个触摸事件，我得到错误“预期一个参数但得到两个”

（我使用的是typescript / scss / pug预处理器，gulp编译器）

我试图随机化x和y坐标，但是这只是随机化它们并没有将它们“绑定”到我的点击事件。我也尝试用css使用：Active~select，但它没有出现在用户活动的地方，只是在容器的左上角。所以我不知道CSS是否可行。

$("#clickimage").click(function(){
$('<img src="https://www.placecage.com/c/200/300">').appendTo($("#clickimage"));
        });

$('#clickimage').ontouchstart = ();

css看起来像：

#clickimage {
    display: none;
}

尝试过css：

:active ~ #clickimage{
    display: block;
  }

HTML

<canvas width="632" height="418" id="clickimage"></canvas>

Answer 1

也许像香草JS这样的东西可以帮助你 - 诀窍是使用offsetX / Y固定的位置。

function paintImage(e){
  document.querySelector('#wrapper').innerHTML += `<img src="https://www.placecage.com/c/200/300" style="left:${e.offsetX}px;top:${e.offsetY}px">`;
 }
document.addEventListener('click', paintImage);

img {
  position: fixed;
  display: block;
  background: #f00;
  width: 100px;
  height: 100px;
}

#wrapper {
  width: 100%;
  height: 100vh;
  }

<div id="wrapper"></div>