Javascript 如何获得x&；y与图像输入相关？

我有一个图像类型的输入集：

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

---

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

处理函数的参数（“事件”对象）有“pageX”和“pageY”值。用它们和img元素的“position（）”或“offset（）”进行数学运算（无论哪一个更好；我发现预测这两个元素中的哪一个在任何给定情况下都会起作用真的很混乱）

换句话说，img元素的“position（）”给出了一个“top”和“left”值。从“pageY”和“pageX”中减去这些，就得到了图像本身相对于其左上角的位置

---

我不太明白您为什么要绑定到“提交”事件-图像是在“提交”按钮内还是什么？

这里有一个很好的教程：

---

您无法获取

x

和

y

值，因为

submit

在表单提交之前执行

从：

。。。当用户试图提交表单时，提交事件将发送到元素

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

---

按照我的理解，图像输入取代了提交输入。所以点击图片和点击提交按钮的动作是一样的。。。你能发布你的HTML吗？这听起来很可疑。你是在哪里发现这个建议的？哦，你确实发布了你的HTML:-）对不起。无论如何，这种设置方式不会导致表单提交。但是，您可以将“单击”处理程序附加到图像，并使用该处理程序在表单上调用“提交”。呃，

input type=“image”

确实会导致提交。您可以将其替换为一个无用的图像，并按照Nick的回答编写脚本，但是如果没有启用JavaScript，提交按钮将无法工作，如果您按Enter键提交表单而不是单击，则不会进行其他表单验证。你可以有一个混合系统，坐标由输入onclick捕捉，并由表单onsubmit中的验证代码记住；我已经很久没有做那样的事了：-）对不起，误导你了，杰隆。还感谢您如此详细地更正我@bobince。链接已过时。它动了吗？

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

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