Javascript Jquery弹出2个多警报和错误坐标

晚上好

我希望JQuery在单击图像并显示图像中光标位置的x和y坐标时弹出一个警报

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah')
                .attr('src', e.target.result)
                .width(300)
                .height(300)
            $('#blah').mouseenter(function (e) {
                $(this).click(function (e) {
                    alert(e.pageX + ' , ' + e.pageY);
                })
            });
        };
        reader.readAsDataURL(input.files[0]);
    }
}

HTML:

现在，当我单击一次，X和Y坐标来自整个页面时，我随机得到1-5个警报，但我只想要图像中的坐标

---

如何实现这一点？

这是因为每次用鼠标输入

#blah

时，单击事件都会被绑定，从而导致重复事件

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result).width(300).height(300)
            $('#blah').mouseenter(function (e) { /*code for mouseenter*/ });
        };
        reader.readAsDataURL(input.files[0]);
    }
}
$(document).ready(function () {
    $('#blah').on('click', function (e) {
        var offset = $(this).offset(),
            pageX = e.pageX,
            pageY = e.pageY;
        var imgX = pageX-offset.left,
            imgY = pageY-offset.top;
        alert(imgX + ' , ' + imgY);
    });
});

---

这是因为每次用鼠标输入

#blah

时，单击事件都会被绑定，从而导致重复事件

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result).width(300).height(300)
            $('#blah').mouseenter(function (e) { /*code for mouseenter*/ });
        };
        reader.readAsDataURL(input.files[0]);
    }
}
$(document).ready(function () {
    $('#blah').on('click', function (e) {
        var offset = $(this).offset(),
            pageX = e.pageX,
            pageY = e.pageY;
        var imgX = pageX-offset.left,
            imgY = pageY-offset.top;
        alert(imgX + ' , ' + imgY);
    });
});

---

您真正想要的是readURL创建一个

以及您的HTML：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            if ($('#blah')) {
                $('#blah').remove();
            }
            $('<img id="blah" />')
                .attr('src', e.target.result)
                .width(300)
                .height(300)
                .click(function (e) {
                    window.alert($(this).position().top + ' , ' + $(this).position().left);
                }).appendTo($('#divfuerimage'));
        };
        reader.readAsDataURL(input.files[0]);
    }
}

您真正想要的是readURL创建一个

以及您的HTML：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            if ($('#blah')) {
                $('#blah').remove();
            }
            $('<img id="blah" />')
                .attr('src', e.target.result)
                .width(300)
                .height(300)
                .click(function (e) {
                    window.alert($(this).position().top + ' , ' + $(this).position().left);
                }).appendTo($('#divfuerimage'));
        };
        reader.readAsDataURL(input.files[0]);
    }
}


这是因为每次您用鼠标输入
#blah
时，单击事件都会被绑定，从而导致重复事件。@anton我如何解决这个问题？在document.ready
$（document.ready）中绑定单击事件（function（）{/*click event*/*Functions*/}）在函数外部，这是因为每次用鼠标输入
#blah
时，单击事件都会被绑定，从而导致重复事件。@anton我如何解决这个问题？在document.ready
$（document.ready）中绑定单击事件（function（）{/*click event*/*Functions*/}）
在函数外部使用您给我的代码，我的图像不再显示#blah将在使用此解决方案执行readURL之前触发警报。@anton感谢它现在可以工作了。如何解决第二个问题，即获取整个页面的坐标？（我只想要图像中的那些）@anton不，这给了我图像的位置。我的意思是我想要光标在image@FelixLahmer比如2.12314923？如果是
parseInt（imgY）
使用您给我的代码，我的图像将不再显示#blah将在使用此解决方案执行readURL之前触发警报。@anton感谢它现在可以工作了。如何解决第二个问题，即获取整个页面的坐标？（我只想要图像中的那些）@anton不，这给了我图像的位置。我的意思是我想要光标在image@FelixLahmer比如2.12314923？如果是
parseInt（imgY）此技术的优点是什么？通常我更喜欢在htmlsorry中查看我的所有元素，但我不会使用您的警报（this.position（）.x+'，'+this.position（）.Y）获得任何警报；这样做的好处是，您不会创建一个无效的映像元素，它不指向任何内容，您只会在需要时创建/销毁事件。帮我一个忙，试着点击上面安东解决方案中的空图像。它将触发一个警报，尽管事实上图像还不应该被加载。啊，好的，我理解。我会修改它，谢谢，但是图像不会显示出来。这项技术的优点是什么？通常我更喜欢在htmlsorry中查看我的所有元素，但我不会使用您的警报（this.position（）.x+'，'+this.position（）.Y）获得任何警报；这样做的好处是，您不会创建一个无效的映像元素，它不指向任何内容，您只会在需要时创建/销毁事件。帮我一个忙，试着点击上面安东解决方案中的空图像。它将触发一个警报，尽管事实上图像还不应该被加载。啊，好的，我理解。我会修改它的，谢谢，但是图像不知怎么没有显示出来