jQuery onclick：位置X / Y

Question

我有一个相对于这个div位置的div是绝对定位的另一个div。 现在，我想接收PositionX和PositionY坐标。 当我单击div中的“自由”点时，它工作得很好，但是当我单击该div中的绝对位置元素时，我得到了错误的坐标。

https://jsfiddle.net/vqb56uf3/2/

 $(".relative").click(function(e) { $(".clickIndicator").css({ "left": e.offsetX + "px", "top": e.offsetY + "px", "display": "block" }); }); 

 .relative { position: relative; width: 500px; height: 300px; background: black; } .absolute { position: absolute; height: 30px; width: 30px; background: white; } .clickIndicator { position: absolute; border-radius: 100px; width: 10px; height: 10px; background: red; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="relative"> <div class="clickIndicator"></div> <div class="absolute" style="top: 30px; left: 90px;"></div> <div class="absolute" style="top: 200px; left: 340px;"></div> <div class="absolute" style="top: 140px; left: 79px;"></div> <div class="absolute" style="top: 230px; left: 211px;"></div> <div class="absolute" style="top: 90px; left: 450px;"></div> <div class="absolute" style="top: 80px; left: 260px;"></div> </div> 

Answer 1

要相对地获得坐标，请使用pageX和pageY 。

鼠标相对于文档左边缘的位置

另外，您可以通过增加.relative位置来相对地计算元素，如下所示：

 $(".relative").click(function(e) { var offset = $(this).offset(); $(".clickIndicator").css({ "left": e.pageX - offset.left + "px", "top": e.pageY - offset.top + "px", "display": "block" }); }); 

 .relative { position: relative; width: 500px; height: 300px; background: black; } .absolute { position: absolute; height: 30px; width: 30px; background: white; } .clickIndicator { position: absolute; border-radius: 100px; width: 10px; height: 10px; background: red; display: none; z-index: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="relative"> <div class="clickIndicator"></div> <div class="absolute" style="top: 30px; left: 90px;"></div> <div class="absolute" style="top: 200px; left: 340px;"></div> <div class="absolute" style="top: 140px; left: 79px;"></div> <div class="absolute" style="top: 230px; left: 211px;"></div> <div class="absolute" style="top: 90px; left: 450px;"></div> <div class="absolute" style="top: 80px; left: 260px;"></div> </div> 

Answer 2

偏移量是相对于事件目标的。 要获取点击事件的X，Y坐标，您需要考虑目标的位置。 传统的JavaScript方法是这样的：

var element = e.target,
    bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offsetX  = elemRect.left - bodyRect.left + e.offsetX,
    offsetY  = elemRect.top - bodyRect.top + e.offsetY;