如何从图像输入中获取 xy 坐标？答案

【问题标题】：How do get the x&y corrdinates from an image input?如何从图像输入中获取 xy 坐标？
【发布时间】：2010-02-13 22:00:22
【问题描述】：

我将输入设置为一种图像：

<form id="MapForm" action="#">
    <input type="image" src="usa.jpg" id="usa_map" alt="USA"/>
</form>

我想附加一个函数，以便我可以获取一个人点击的 X 和 Y 坐标：

$('#MapForm').submit(ClickOnMap);
function ClickOnMap(data)
{
    return false;
}

我在“数据”中找不到 X 和 Y 坐标。我做错了什么？

【问题讨论】：

标签： javascript jquery image input

【解决方案1】：

这里有一个很好的教程，in the jQuery docs：

$('#usa_map').click(function(e){

  //Grab click position, mis the offset of the image to get the position inside
  var x = e.pageX - this.offsetLeft;
  var y = e.pageY - this.offsetTop;
  alert('X: ' + x + ', Y: ' + y);

  //set 2 form field inputs if you want to store/post these values
  //e.g. $("#usa_map_x").val(x); $("#usa_map_y").val(y);

  //Submit the form
  $('#MapForm').submit();
});

【讨论】：

链接已过期。搬家了吗？

【解决方案2】：

处理函数的参数（“Event”对象）具有“pageX”和“pageY”值。用这些和 img 元素的“position()”或“offset()”进行数学运算（哪个效果更好；我发现预测两者中的哪一个在任何给定情况下都有效）。

换句话说，img 元素的“position()”给出了“top”和“left”的值。从“pageY”和“pageX”中减去它们，你就得到了图像本身相对于其左上角的位置。

我不确定我是否理解您为什么要绑定到“提交”事件 - 是“提交”按钮内的图像还是什么？

【讨论】：

按照我的理解，图像输入代替了提交输入。所以点击图片和点击提交按钮的操作是一样的。
uhhh ...你能发布你的HTML吗？这对我来说听起来很可疑。您是从哪里得知这个建议的？
哦 duhhhh - 你确实发布了你的 HTML :-) 抱歉。无论如何，设置的方式不会导致表单提交发生。但是，您可以将“点击”处理程序附加到图像，并使用它在表单上调用“提交”。
er，input type="image" 确实会导致提交发生。您可以将其替换为无效图像并按照尼克的回答自己编写脚本，但是如果没有启用 JavaScript，提交按钮将无法工作，并且如果您按 Enter 提交表单而不是单击，则不会发生其他表单验证。你可以有一个混合，其中坐标由 input-onclick 捕获，并由 form-onsubmit 中的验证代码记住。
哦，好吧，我猜你是对的；我已经很久没有做过类似的事情了:-) 很抱歉误导你，@jerone。还要感谢@bobince 如此详细地纠正我。

【解决方案3】：

您无法获取x 和y 值，因为submit 在表单提交之前执行。

来自jQuery API：

...当用户尝试提交表单时，提交事件被发送到元素...

...这发生在实际提交之前...

【讨论】：