使用 jquery 获取点击链接图像的准确位置答案

【问题标题】：Get accurate position for a click on a linked image using jquery使用 jquery 获取点击链接图像的准确位置
【发布时间】：2009-07-14 23:29:06
【问题描述】：

我正在开发一个允许通过点击直接在照片上标记的应用程序（如 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>`

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

为你的 x 和 y 尝试使用这个：

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

如果这不起作用，请告诉我

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

编辑 2：您能否尝试将点击事件分配给图像而不是链接。我暗中怀疑该链接将其顶部偏移量报告为它封装的元素的底部...

【讨论】：

hrm，这似乎解决了 x 值的问题，尽管 y 值仍然是负数。 {"x"=>"1", "y"=>"-602"}
尝试输出 e.pageY 和 $(this).offset().left 看看哪个不正确，这可能有助于解决这个问题
你也可以发布任何影响图像及其父母的CSS
e.pageY 给了我 292，这是正确的。 $(this).offset().left 给了我 890 的距离（除非是从图像底部测量，即 615 像素，并且图像上方大约有 290 像素的内容）。所有相关的 css 都在最初的帖子中。
尝试从 img 而不是锚点中获取 x 和 y 值。锚可能未正确对齐。

【解决方案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.

【讨论】：