JQuery X / Y co-ords для изображения по клику ()

Question

Интересно, кто-нибудь может мне помочь?Я достаточно хорошо знаю JS, но я новичок в JQuery ...

У меня есть изображение, которое загружается динамически при вызове UpdateImage ()

    $.fn.image = function (src, f) {
        return this.each(function () {
            var i = new Image();
            i.src = src;
            i.onload = f;
            this.appendChild(i);
        });
    }

    function UpdateImage() {
        $("#Screen").image("./AJAX/UI/GetImage.aspx", function () {
            //alert('ok');
        });
    }

После изображенияЯ хочу, чтобы пользователь мог щелкнуть в любом месте на нем и использовать координаты X / Y щелчка в вызове AJAX.

Я знаю, как это сделать в чистом JS, но у меня возникает чувстводолжен быть более элегантный метод JQuery ...

В настоящее время я пытаюсь это сделать:

    $(document).ready(function () {
        $("#Screen").click(function () {
            alert(this.x + ', ' + this.y);
        });
        UpdateImage();
    });

К сожалению, полученные значения X и Y являются постоянными независимо от местоположения щелчка.(x: 9, y: 1019).

Вопрос: Поскольку изображение находится почти в верхнем левом углу страницы, я удивлен значением Y - что делаетэто представляет?Я предположил, что если бы это были не мышиные координаты, это было бы местоположение элемента - но это не кажется правильным - Y здесь положительно в направлении «Вверх», а не вниз (как я ожидал)?

Я гуглил и нашел множество решений, которые я считаю излишними - они применимы к любому типу элемента и основаны на расчете положения элемента, а затем на позиции курсора мыши и выполнении некоторых математических операций - это выглядит очень не элегантно и подвержено ошибкампоскольку это зависит от браузера.

Вопрос: Правильный ли я подход?Должен ли я использовать виджет JQuery UI для отображения изображения?Ради аргумента предположим, что изображение является ScreenShot и, вероятно, будет больше, чем окно браузера - в настоящее время я использую браузер для прокрутки и т. Д., Но опять же подозреваю, что может быть лучший способ?

Короче говоря, любые советы от некоторых экспертов по JQuery будут высоко оценены, особенно если бы вы указали мне хороший ресурс JQuery (я нашел руководство, но это более полезно для сигнатур методов, чем для определения того, какой подход).верно при использовании JQuery)

В случае, если это влияет на ваши ответы, элемент, который я использую для хранения изображения, показан ниже

<div id="Image"><img id="Screen"/></div>

Заранее большое спасибо за любую помощь, вы можетепредоставить.

Answer 1

Вы пытались использовать координаты, прикрепленные к событию клика, а не элемент:

$(document).ready(function () {
        $("#Screen").click(function (e) {
            alert(e.pageX + ', ' + e.pageY);
        });
        UpdateImage();
    });