Question

我正在开发一款可以通过点击直接在照片上进行标记的应用程序（如Facebook，flickr等）。但是，我似乎无法为照片上的点击注册正确的坐标。问题是x坐标似乎是浏览器窗口内（而不是照片内）点击的绝对x距离，而y坐标通常是负的或非常小（靠近顶部的负值，靠近底部的小值）。这些是我在左上角附近点击时得到的值（应注册为0或者接近0：“x”=＆gt;“219”，“y”=＆gt;“ - 311”...... 219似乎是关于在测量距浏览器窗口左侧的距离时，但距离应在照片区域内

我目前正在使用常规链接捕获照片上的点击事件和坐标（该链接包含其他相关照片数据）并在将其传递到我的rails应用程序之前进行数学运算（jquery文档中使用的相同计算）。我怀疑这个方法与错误的值有很大关系，尽管我怀疑数学或某些css怪可能有问题。在任何一种情况下，我都是绝对令人难以置信的。

JS：

$(document).ready(function(){
clickTag();

}）;

function clickTag(){
   $("#taggable").click(function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var url = $(this).attr("href");
        courl = url + '&x=' + x + '&y=' + y;
      $.ajax({
        type:"GET",
        url: courl,
        dataType:"script"
        });
        return false;
   }); 
}

CSS：

`<div class="content">
    <div id="image_container" style="position:relative;width:405px;float:left;height:600px;>
        <a href="/tags/new_xy?look_id=188&amp;photo_id=1150" id="taggable" style="position:relative;top:0;left:0px;"><img alt="taggable_image" src="taggable_image.jpg" /></a>
    <div class="tags" id="tags"></div>
    </div>
</div>`

Answer 1

你的x和y尝试使用它：

var x = e.pageX - $(this).offset().left;
var y = e.pageY - $(this).offset().top;

如果不起作用，请告诉我

编辑：澄清一下 - 您直接从dom元素获得左侧和顶部偏移量。我建议你使用jQuery offset（）函数的原因是jQuery更有可能计算出跨浏览器的正确位置。

编辑2：您可以尝试将点击事件分配给图片而不是链接。我有一种潜在的怀疑，即链接报告其顶部偏移量作为它封装的元素的底部......

Answer 2

我的功能是：

function getCoords(target, event)
{
    var $target = $(target);
    var offset = $target.offset();
    var bordersize = $target.attr('border');
    return {
        x:  (event.pageX - offset.left - bordersize) | 0,
        y:  (event.pageY - offset.top - bordersize) | 0
    }
}

呼叫：

$("#image").on('click', function(event){
    var coords = getCoords(this, event);
    console.log('X: ', coords.x);
    console.log('Y: ', coords.y);
});

注意：used fast float2int。

使用jquery获取在链接图像上单击的准确位置

2 个答案: