点击图片，获取坐标答案

【问题标题】：Click an image, get coordinates点击图片，获取坐标
【发布时间】：2010-09-06 09:00:59
【问题描述】：

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

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

【问题讨论】：

这个帖子的答案完全相同bytes.com/forum/thread507079.html">question</a> 更多信息quirksmode.org/js/…>

【解决方案1】：

我想你说的是：

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

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

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

【讨论】：

【解决方案2】：

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

你应该使用的功能

Point mousePoint = e.GetPosition( this );

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

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

【讨论】：

【解决方案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>

【讨论】：