用于image onclick()的jquery x/y命令

我想知道是否有人能帮助我。我很了解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');
        });
    }

加载图像后,我希望用户能够单击它上面的任何地方,并在Ajax调用中使用单击的X/Y坐标。

我知道如何在纯JS中实现这一点,但我觉得必须有一个更优雅的jquery方法…

目前,我正在尝试:

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

不幸的是,无论单击位置如何,检索到的x和y都是常量。(X:9,Y:1019)。

问题: 由于图像几乎在页面的左上角,我对Y值感到惊讶-它代表什么?我假设,如果不是鼠标命令,它将是元素位置-但这似乎不正确-Y在“向上”方向是正的,而不是向下的(如我所预期的)?

我在谷歌上搜索并找到了很多我认为是多余的解决方案——它们适用于任何元素类型,依赖于计算元素位置,然后鼠标光标位置,并进行一些数学运算——这看起来非常糟糕,而且容易出错,因为它依赖于浏览器。

问题: 我采取的方法正确吗?我应该使用jquery ui小部件来显示图像吗?为了争论,假设图像是一个屏幕截图,可能比浏览器窗口大-我目前依靠浏览器进行滚动等。但再次怀疑可能有更好的方法吗?

简而言之,任何来自jquery专家的建议都会非常感谢——特别是如果你能给我指出一个好的jquery资源(我已经找到了手册,但这对于方法签名比在使用jquery时找出正确的方法更有用)。

如果它影响您的响应,我用来存储图像的元素如下所示

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

非常感谢您提供的任何帮助。