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;