javascript - 点击图片，获取坐标

Question

我有一个标准的 HTML 图像标签，里面有一个图像，大小为 100 x 100 像素。我希望人们能够单击图像并将他们单击的 X 和 Y 传递给函数。

坐标需要相对于图像的顶部和左侧。

Answer 1

我想你在谈论：

<input id="info" type="image">

提交时，x 和 y 坐标的表单值基于输入元素 id（info.x在info.y本例中）。

http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4.1

Answer 2

根据您的描述，您应该注册到图像鼠标事件，对于这种情况，您应该有图像鼠标按钮事件。

在你应该使用的功能

Point mousePoint = e.GetPosition( this );

这将根据左上角的 int 像素为您提供鼠标位置。

比在mousePoint您可以打印 X 和 Y 信息。

Answer 3

用你的图像替换画布，它的工作原理是一样的

let img = document.getElementById("canvas");

img.x = img.getBoundingClientRect().left;
img.y = img.getBoundingClientRect().top;

function click(e) {
  document.getElementById("output").innerHTML = "X coords: " + (e.clientX - img.x) + "<br> Y coords: " + (e.clientY - img.y);
}

img.addEventListener("click", click);

<!--- Like a image --->
<canvas id="canvas" width="100" height="100"></canvas>
<p id="output"></p>