关于javascript：使用jquery获取点击链接图像的准确位置


Get accurate position for a click on a linked image using jquery

我正在开发一个应用程序，它允许通过点击直接在照片上标记(如Facebook、Flickr等)。但是，我似乎无法为单击照片注册正确的坐标。问题是X坐标似乎是浏览器窗口(而不是照片)中单击的绝对X距离，而Y坐标通常为负或非常小(顶部附近为负，底部附近为小)。这些是我单击左上角附近时得到的值(应该注册为0或0附近的值)："x"=>"219"，"y"=>"-311"…219在测量与浏览器窗口左侧的距离时似乎是右的，但该距离应在照片区域内)

我目前正在使用常规链接(链接包含其他相关照片数据)在照片上捕获单击事件和坐标，并在将其传递到我的Rails应用程序之前进行数学运算(jquery文档中使用的计算方法相同)。我怀疑这个方法与错误的值有很大的关系，尽管我怀疑数学或一些CSS的怪癖可能是错误的。不管是哪种情况，我都非常困惑。

JS：

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

(})；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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：

1
2
3
4
5
6
`
   
        <img alt="taggable_image" src="taggable_image.jpg" />
   
   
`

For your X and y try using this:

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

让我知道这不管用

编辑：为了清晰-你直接从DOM元素上取下左上偏移。我建议你使用JQuery胶印功能是因为我更喜欢计算正确的跨浏览器位置。

第2版：请试着为图像指定点击事件作为链接的对话框。我有一个不寻常的疑虑，那条链接被报告为它的顶部胶片，作为元素的底部胶囊。

相关讨论

我的功能是

ZZU1

呼叫：

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

注：Used Fast Float2int。