javascript - 如何点击并在该位置写入x/y位置？

Question

这个问题已经有答案了:

How do get the x&y corrdinates from an image input? (3 个回答)

已关闭 7 年前。

我的页面上有一张图像。我希望能够单击整个图像，并在单击时输出每次单击的 x/y 位置(坐标)。我怎样才能做到这一点？

注意:我已经知道如何获取 x/y 坐标。我的问题集中在如何将 x/y 坐标写入屏幕上的确切坐标？

我想即使点击图像，我也会动态地编写一个内联 div，其中包含文本坐标。但我不知道如何实现。谢谢!

Answer 1

这是一个工作片段。想法是将点击事件绑定(bind)到 img 元素，然后在点击时创建一个动态 span 标签并设置其 top 和 left css 属性分别为 event.offsetY 和 event.offsetX。这将确保跨度恰好位于单击发生的位置。

$('img').on('click',function(e){
  var span = "<span style='position:absolute;top:"+e.pageY+"px;left:"+e.pageX+"px'>"+e.offsetX +","+ e.offsetY+"</span>"
  $('body').append(span);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRGXr0yFkbJ07wEoT9Eg1nO2nA2Vsr8g5wXKRk4BkUPudku-BwC8Q" alt="my image" style="margin:50px;">