如何在鼠標單擊子 div 時獲取父 div 坐標 position

Question

我正在嘗試創建一個小地圖功能，我有兩個 HTML 元素，它們可以是圖像或 div，因此當用戶單擊一個元素時，它應該給出/轉換另一個目標元素的坐標。

單擊的元素大小 (w/h) 將始終很小，而 position 將是絕對的。 到目前為止，我已成功獲得點擊元素 position 但我無法將這些坐標轉換為目標元素。

https://jsfiddle.net/shoaib_ijaz/n1hzuc9r/

 $(".child").click(function(e) { var offset = $(this).offset(); var left = e.pageX - offset.left; var top = e.pageY - offset.top; var circle = $("<div />", { class: 'circle' }); $(circle).css({ left: left, top: top }); $(".parent").append(circle); });

 .parent { border: 3px solid #000; background: #898383; width: 100%; height: 300px; }.child { background: #fff; position: absolute; right: 15px; bottom: 40px; width: 200px; height: 100px; border: 2px solid #eff431; }.circle { width: 10px; height: 10px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; position: absolute; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <div class="child"> child </div> </div> <!-- some times the child element can be outside the parent element -->

例如：

Answer 1

Map 使用父/子寬高比例的坐標

 $(".child").click(function(e) { var offset = $(this).offset(); var ratioX = $(".parent").width() / $(this).width(); var ratioY = $(".parent").height() / $(this).height(); var left = (e.pageX - offset.left) * ratioX; var top = (e.pageY - offset.top) * ratioY; var circle = $("<div />", { class: 'circle' }); $(circle).css({ left: left, top: top }); $(".parent").append(circle); });

 .parent { border: 3px solid #000; background: #898383; width: 100%; height: 300px; }.child { background: #fff; position: absolute; right: 15px; bottom: 40px; width: 200px; height: 100px; border: 2px solid #eff431; }.circle { width: 10px; height: 10px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; position: absolute; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <div class="child"> child </div> </div> <!-- some times the child element can be outside the parent element -->