Question

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

注意：我已经知道如何获得x / y坐标。我的问题围绕如何在那些精确坐标处将x / y坐标写入屏幕？

我想在偶然的图像上我会动态地写一个带有文本坐标的内联div。但我不知道如何实现它。谢谢！

Answer 1

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

＆＃13;

$('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);
});

＆＃13;

<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;">

＆＃13;

Answer 2

window.onclick = function(e){
  var x = e.clientX;
  var y = e.clientY;
  console.log(x, y);
};

Answer 3

您可以向图像添加容器

<div class="image-container">
    <img src="image.jpg" alt="my image">
</div>

相对于容器应用一个位置，并将绝对值应用于坐标

.image-container {
    position: relative;
}

.image-container .coords {
    position: absolute;
}

然后向图像添加点击事件

$('.image-container img').click(function (e) {
    var img = $(e.currentTarget);

    //get the point relative to the container
    //if you want it relative to the window, get pageX/pageY instead
    var x = e.offsetX;
    var y = e.offsetY;

    var coords = $('<div class="coords"></div>');
    coords.text(x + ', ' + y);

    var container = img.parent();
    coords.css({
        left: x + 'px',
      top: y + 'px'
    });
    container.append(coords);
});

这里是jsfiddle

Answer 4

使用offsetX中的offsetY和MouseEvent来查找图片中点击的坐标，并使用pageX和pageY获取所需的坐标在该位置定位<span>元素：

$("img").click(function(e) {
  $("<span></span>")
    .css({
      position: "absolute",
      left: e.pageX,
      top: e.pageY
    }).text("(" + e.offsetX + ", " + e.offsetY + ")")
    .appendTo("body");
});

$("img").click(function(e) {
  $("<span></span>")
    .css({
      position: "absolute",
      left: e.pageX,
      top: e.pageY
    }).text("(" + e.offsetX + ", " + e.offsetY + ")")
    .appendTo("body");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://i.stack.imgur.com/aGtYm.png" />

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

4 个答案: