Nhận vị trí chính xác cho một nhấp chuột lên hình ảnh được liên kết bằng cách sử dụng jquery

Question

Tôi đang làm việc trên một ứng dụng cho phép gắn thẻ trực tiếp trên ảnh bằng cách nhấp (như Facebook, flickr, et al). Tuy nhiên, tôi dường như không thể đăng ký tọa độ phù hợp cho một nhấp chuột lên ảnh. Vấn đề là tọa độ x có vẻ là khoảng cách x tuyệt đối của một lần nhấp trong cửa sổ trình duyệt (chứ không phải trong ảnh), trong khi toạ độ y thường âm hoặc cực nhỏ (âm gần đầu, nhỏ gần phía dưới). Đây là những giá trị tôi nhận được khi nhấp vào gần góc trên cùng bên trái (nên đăng ký là ở gần hoặc gần 0: "x" => "219", "y" => "- 311" ... 219 dường như đúng khi đo khoảng cách từ phía bên trái của cửa sổ trình duyệt, nhưng khoảng cách phải nằm trong khu vực ảnh)

Tôi hiện đang nắm bắt các sự kiện và tọa độ nhấp vào ảnh bằng liên kết thông thường (liên kết chứa dữ liệu ảnh có liên quan khác) và thực hiện phép toán (cùng các phép tính được sử dụng trong các tài liệu jquery) trước khi chuyển nó sang ứng dụng đường ray của tôi. Tôi nghi ngờ phương pháp có nhiều để làm với các giá trị sai lầm, mặc dù tôi nghi ngờ toán học hoặc một số quirk quirk có thể có lỗi. Trong cả hai trường hợp, tôi hoàn toàn boggled.

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

cho x và y thử sử dụng này:

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

cho tôi biết nếu điều đó không làm việc

EDIT: để làm rõ - bạn đang nhận được phần bù đắp bên trái và trên trực tiếp từ phần tử dom. lý do tôi đề nghị bạn sử dụng hàm jQuery offset() là jQuery có nhiều khả năng tính toán đúng trình duyệt chéo vị trí.

CHỈNH SỬA 2: Bạn có thể thử chỉ định sự kiện nhấp vào hình ảnh trái ngược với liên kết hay không. Tôi có một nghi ngờ lén mà liên kết được báo cáo hàng đầu của nó bù đắp như đáy của phần tử đó đóng gói ...

Answer 2

chức năng của tôi là:

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

gọi:

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

Lưu ý: used fast float2int.