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');
        });
    }

图像加载后，我希望用户能够点击它上面的任何地方，并在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小部件来显示图像吗？为了争论，假设图像是一个ScreenShot，可能比浏览器窗口大 - 我目前依靠浏览器滚动等等，但又怀疑可能有更好的方法？

简而言之，一些JQuery专家的任何建议都会非常感激 - 特别是如果你能指出一个好的JQuery资源（我已经找到了手册，但这比方法签名更有用，而不是确定哪种方法是正确的使用JQuery时）

如果它影响您的回复，我用来存储图片的元素如下所示

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

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

Answer 1

您是否尝试使用附加到click事件的coords而不是元素：

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

JQuery X / Y用于图像onclick（）

1 个答案: