如何從圖像輸入中獲取x＆y corrdinates？

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

我在'data'中找不到X＆Y坐標。 我究竟做錯了什么？

Answer 1

這里有一個很好的教程， 在jQuery文檔中 ：

$('#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（）”給出“頂部”和“左”值。 從“pageY”和“pageX”中減去那些，並且您在圖像本身中相對於其左上角的位置。

我不確定我理解為什么你綁定到“提交”事件 - 是“提交”按鈕內的圖像還是什么？

Answer 3

您無法獲取x和y值，因為submit在表單子項之前執行。

來自jQuery API ：

...當用戶嘗試提交表單時，提交事件將發送到元素...

......這發生在實際提交之前......