使用jQuery获取链接图像点击的准确位置

Question

我正在开发一个允许通过单击直接在照片上标记的应用程序（例如Facebook，flickr等）。但是，我似乎无法为单击照片注册正确的坐标。问题在于，x坐标似乎是浏览器窗口（而不是照片）内单击的绝对x距离，而y坐标通常为负或难以置信的很小（顶部附近为负，底部附近为小）。这些是我在左上角附近单击时获得的值（应该注册为0或附近的值：“
x” =>“ 219”，“ y” =>“-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： 能否请您将点击事件分配给图像，而不是链接。我有一个偷偷摸摸的怀疑，即该链接报告其顶部偏移量为所封装元素的底部…