javascript - 如何从图像输入中获取 xy 坐标？

Question

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

<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 坐标。我做错了什么？

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