Question

G'Evening

我想让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：

<input type='file' onchange="readURL(this);" />
  <div id="divfuerimage" height="300px" width="300px" >
    <img id="blah" src="#" alt="your image" style="cursor: pointer"/>
    </div>

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

我怎样才能实现这个目标？

Answer 1

这是因为每当您使用鼠标输入#blah时，click事件就会被绑定，从而导致重复事件。

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

Answer 2

您真正想要的是readURL在成功读取文件时创建<img>元素。

使用this.position（）

解决您的坐标问题

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

你的HTML：

<input type='file' onchange="readURL(this);" />
<div id="divfuerimage" height="300px" width="300px" >
</div>

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

2 个答案: