Question

我有一个输入设置为一种图像：

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

我想附加一个功能，以便我可以获得X＆amp; Y点击一个人点击的位置：

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

我找不到X＆amp; Y坐标'数据'。我做错了什么？

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

Answer 2

处理函数的参数（“Event”对象）具有“pageX”和“pageY”值。用这些和你的img元素的“position（）”或“offset（）”做数学计算（哪个更好;我发现预测两者中的哪一个在任何特定情况下都会起作用真的很混乱。）

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

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

Answer 3

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

来自jQuery API：

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

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

如何从图像输入中获取x和y坐标？

3 个答案: