Как получить 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;
}

Я не могу найти координаты 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

Вы не можете получить значения x и y, поскольку submit выполняется перед отправкой формы.

Из jQuery API :

... Событие submit отправляется элементу, когда пользователь пытается отправить форму ...

... Это происходит до фактического представления ...

Answer 3

Параметр функции-обработчика (объект «Событие») имеет значения «pageX» и «pageY».Сделайте математику с этими и "position ()" или "offset ()" для вашего элемента img (в зависимости от того, что работает лучше; я нахожу очень запутанным, чтобы предсказать, какой из этих двух будет работать в любой данной ситуации).

Другими словами, "position ()" элемента img дает значения "top" и "left".Вычтите их из "pageY" и "pageX", и вы получите положение в самом изображении относительно его верхнего левого угла.

Я не уверен, что понимаю, почему вы привязываетесь к "submit"событие - это изображение внутри кнопки «отправить» или что-то еще?