如何使圖像在點擊時出現，准確發生點擊的位置？

Question

我試圖在單擊畫布區域時添加圖像。 我更喜歡使用 jquery，但 vanilla js 或 css 也可以。 問題是，我可以使用 click 和 append 添加一個點擊功能，但是它沒有出現在我點擊的確切位置，這就是我想要發生的。 我還試圖向點擊事件添加一個觸摸事件，但出現錯誤“預期有一個參數，但有兩個”

（我使用的是 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>

Answer 1

也許在 vanilla 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>