如何使图像出现在点击时，点击发生的确切位置？答案

【问题标题】：How to make an image appear on click, exactly where the click occurred?如何使图像出现在点击时，点击发生的确切位置？
【发布时间】：2019-04-15 19:24:56
【问题描述】：

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

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

我尝试随机化 x 和 y 坐标，但这只是随机化它们，并没有将它们“绑定”到我的点击事件。我也使用 :Active ~ 选择器尝试使用 css 进行此操作，但是它没有出现在用户处于活动状态的位置，仅出现在它所在容器的左上角。所以我不知道 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>

【问题讨论】：

您将图像附加到 id clickimage 的 html 文件在哪里？
<canvas width="632" height="418" id="clickimage"></canvas>

标签： javascript html css typescript pug

【解决方案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;
  }

&lt;div id="wrapper"&gt;&lt;/div&gt;

【讨论】：