javascript - 准确地在提交点击的位置创建一个 div？

Question

我正在尝试在提交点击的位置创建一个 div，下面是我的尝试，但没有任何反应。有人可以告诉我为什么吗？

html:

<div id="commentArea"></div>
<div id="commentBox"></div>

js:

var commentBox = $('#commentBox');  
var offset = -10;   
var posX, posY  
var boxCount = 0;

commentBox.click(function(e){
    $('#commentArea').append('<div class="box-' + boxCount + '"></div>');
    $('.box-' + boxCount).offset({
        top: posY,
        left: posX
    });
    boxCount++;     
});

CSS:

#commentBox,
[class^=box] {
    width: 200px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    display: inline-block;
    z-index: 60;
    float: left;
}

[class^=box] {
    z-index: 1;
}

Answer 1

这将创建一个子 div，鼠标在父(浅蓝色)div 中单击。 child 的左上角将是鼠标点击的位置，但如果需要，您可以通过考虑新 child 的高度和宽度来调整它。

document.getElementById("landingPad").addEventListener("click", function(event){
  var newDiv = document.createElement("div");
  newDiv.classList.add("addedDiv");
  newDiv.style.left = event.clientX - this.offsetLeft + "px";
  newDiv.style.top = event.clientY - this.offsetTop  + "px";
  
  this.appendChild(newDiv);
});

#landingPad {
  height: 300px;
  width: 300px;
  background-color: aliceblue;
  position: relative;
}

.addedDiv {
  height: 30px;
  width: 30px;
  background-color: blue;
  position: absolute;
}

<div id="landingPad"></div>