получить координаты клика из <input type = 'image'> через javascript

Question

Пример:

<form>
<input type="image" id = 'toothsImage' src="someImg.jpg" alt="Submit" />
</form>

ТИП формы изображения во многом аналогичен полю INPUT TYPE = SUBMIT, но в отличие от поля SUBMIT, координаты изображения, которые были активированы, отправляются на сервер в дополнениеостальные данные формы.Итак, когда вы нажимаете на input = image, к запросу добавляются координаты кликов, например:

x=1&y=2

Мой вопрос - как можно получить эти координаты, используя javascript, не отправляя форму.

PS 1: Я знаю, что координаты щелчка могут быть рассчитаны разными способами.Я их знаю и могу легко ими пользоваться.Мне интересен этот подход только потому, что здесь браузер вычисляет все автоматически.

PS 2: Мне нужно получить координаты, относящиеся к изображению, а не к документу.

Answer 1

Похоже, offsetX, offsetY недоступны или ненадежны в некоторых браузерах .Я бы рекомендовал использовать pageX и pageY, поскольку они нормализованы с помощью jQuery .Объедините это с offset элемента, по которому щелкают, и вы должны быть в бизнесе:

$("input[type='image']").click(function(event) {
    var elOffsetX = $(this).offset().left,
        elOffsetY = $(this).offset().top,
        clickOffsetX = event.pageX - elOffsetX,
        clickOffsetY = event.pageY - elOffsetY;

    // clickOffsetX and clickOffsetY are the clicked coordinates,
    // relative to the image.
});

Пример: http://jsfiddle.net/andrewwhitaker/87NYk/