如何在 vanilla Javascript 中添加標記並顯示相對於鼠標單擊的 div

Question

我正在嘗試在 vanilla Javascript 中的鼠標單擊旁邊添加一個標記和一個 div。

基本上，如果用戶單擊頁面上的任何位置，我想在單擊的位置添加一個標記（圓形小 div）並在標記旁邊顯示一個 div。

如果用戶按下其他地方，之前的標記和 div 就會消失，它們基本上會出現在點擊的新位置

• 我做了什么：
• 我創建了 div 並將顯示設置為無，現在我將嘗試使其在用戶單擊頁面上的任何位置時出現
• 對於標記，我有這個 Jquery 代碼，我將轉換為 vanilla JS：

  $(function(){
    $('body').click(function(e){
      var x = e.clientX;
      var y = e.clientY;
    
      var circle=$('<div class="circle"></div>');
          circle.css('top',e.pageY - 15);
          circle.css('left',e.pageX - 15)
          $('body').append(circle);
    })
  })

我的目標是擁有這樣的東西（下圖）

Answer 1

啟用 onClick
將body element設置為頁面的完整大小，以便接收onClick 。 添加width: 100%; 和height: 100%; 到body 。 如果這是通過將內容附加到正文來處理的，則可以跳過此步驟。

可移動的藍色圓圈
為了在屏幕上移動 cursor，您需要創建一個單一的 DOM 元素，然后在onclick事件期間移動它。 這是通過在onclick外部創建一個圓並更新 onclick 內部的onclick屬性來實現的。

添加白框
至於白盒容器，可以使用與圓相同的代碼； 只是偏移top和left css 造型。

例子

 $(function(){ // Create a new circle once. var circle=$('<div class="circle"></div>'); var container=$('<div class="container"></div>'); // Retrieve the body and add on click parameter. var body = $('body'); body.append(circle); body.append(container); body.click(function(e){ // Move circle here. circle.css('top', e.pageY - 15); circle.css('left', e.pageX - 15) if (circle.css('display') == 'none') circle.css('display', 'block'); // Move container here. container.css('top', e.pageY + 20); container.css('left', e.pageX - 15); if (container.css('display') == 'none') { container.css('display', 'block'); container.click(function(e) { e.stopPropagation(); // Prevents moving circle when clicking on the container. }) } }) })

 html, body { width: 100%; height: 100%; background-color: grey; }.circle { display: none; position: absolute; width: 30px; height: 30px; background-color: blue; border-radius: 20px; }.container { display: none; position: absolute; background: white; border: 1px solid black; height: 200px; width: 300px; border-radius: 20px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>