Question

我的父div中有一个div

<div class="parent">
   <div class="child"></div>
</div>

和css是

.parent{     
width: calc(100% - 299px);
height: calc(100% - 78px);
display: inline-block;
overflow: scroll;
.child {
  width:1500px;
  height: 2500px;
  background-color: rgba(0,0,0,0);
}
 }

当我在子元素上单击鼠标时，我想在子元素中获取鼠标位置，因此min是0-0 max是1500-2500 然后，当我点击我想在点击位置创建一个div我怎么能这样做？ //首选jquery

Answer 1

要获得坐标，您可以尝试：

$('.child').click(function(e) {
    alert(e.pageX+ ' , ' + e.pageY);
});

Answer 2

元素中的鼠标位置是事件的offsetX和offsetY（并且Y在屏幕底部的最小值和最大值）。新元素的位置还需要考虑父元素的位置，因此添加其左侧和顶部坐标（参见fiddle）：

$(".child").on("click", function(event) {
    alert("Mouse position within child div: X: " + event.offsetX +
  ", Y:" + event.offsetY);
  var offX = $(this).css("left");
  var offY = $(this).css("top");
  var styles = {
   left : event.offsetX + parseInt(offX) + "px",
   top: event.offsetY + parseInt(offY) + "px"
  };
  $(this).append("div").addClass("grandchild").css(styles);
});

获取鼠标单击位置并在该位置实例化div

2 个答案: