javascript - 使用jquery获取相对于图片的点击坐标

Question

我正在尝试制作一个类似 Facebook 的照片标记系统，但到目前为止，我可以单击图像并获得坐标，但是当我尝试使输入框出现在这些坐标处时，它偏移是因为 img 所在的 div 不在页面的右上角。我可以手动更改 x 和 y 的值以使其更准确，但如果我决定重新设置页面样式或移动 div，数据库中标签的所有坐标都会偏离。 Facebook 是怎么做到的？有没有办法保持坐标相对于包含的 div？

这是我所拥有的。

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
  $(document).ready(function() {
    $("#photo").click(function(e) {
      var offset = $(this).offset();
      var x = (e.pageX + offset.left);
      var y = (e.pageY + offset.top);
      $("#tagger").css('top', y - 110); //manual offset
      $("#tagger").css('left', x-20); //manual offset
      $("#tagger").show().focus();
    });

  });
</script>

下面的 div 需要准备好放置在页面的任何位置，并且仍然具有标记功能。

<div>
  <img id="photo" src="image.jpg" height="300" width="300">
  <input type="text" name="tagger" id="tagger">
</div>

感谢您的帮助!

Answer 1

尝试使用 .position而不是 .offset .这将返回元素相对于其父容器的坐标。