如何從圖像輸入中獲取x和y座標？

我有一個輸入設置爲一個類型的圖像：如何從圖像輸入中獲取x和y座標？

<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座標。我究竟做錯了什麼？

來源

2010-02-13 Robert

有一個很好的教程在這個位置，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(); 
});

來源

2010-02-13 22:47:14

鏈接已過時。它移動了嗎？ – 4castle 2016-04-19 02:15:50

處理函數（「Event」對象）的參數具有「pageX」和「pageY」值。用這些數據和你的img元素的「position（）」或「offset（）」做數學運算（以較好的爲準;我發現在任何給定的情況下，預測這兩者中的哪一個會起作用是非常混亂的）。

換句話說，img元素的「position（）」給出了「top」和「left」值。從「pageY」和「pageX」中減去它們，並且在圖像本身內相對於其左上角的位置。

我不確定我明白你爲什麼要綁定「提交」事件 - 是「提交」按鈕內的圖像還是什麼？

來源

2010-02-13 22:02:33 Pointy

我的理解是，圖像輸入取代了提交輸入。因此點擊圖像與點擊提交按鈕具有相同的操作。 – Robert 2010-02-13 22:06:18

呃......你可以發佈你的HTML嗎？這聽起來很腥。你在哪裏遇到過這個建議？ – Pointy 2010-02-13 22:21:00

噢duhhhh - 你DID發佈你的HTML :-)對不起。無論如何，設置的方式不會導致表單提交發生。然而，您可以將「點擊」處理程序附加到圖像上，然後使用它在表單上調用「提交」。 – Pointy 2010-02-13 22:44:43

你不能得到x和y值，因爲submit形式submition之前執行。

從jQuery API：

...提交事件時發送到用戶試圖提交表單元素...

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

來源

2010-02-13 23:09:32 jerone

如何從圖像輸入中獲取x和y座標？

回答

相關問題