Uzyskaj dokładną pozycję kliknięcia na połączonym obrazie za pomocą jquery

Question

Pracuję nad aplikacją, która umożliwia oznaczanie bezpośrednio na zdjęciach za pomocą kliknięcia (np. Facebook, flickr i inni). Nie mogę jednak zarejestrować odpowiednich współrzędnych dla kliknięcia zdjęcia. Problem polega na tym, że współrzędne x wydają się być bezwzględną x odległością kliknięcia w oknie przeglądarki (a nie na zdjęciu), natomiast współrzędne y są często ujemne lub niewiarygodnie małe (ujemne u góry, małe u dołu). Są to wartości, które otrzymuję po kliknięciu w pobliżu lewego górnego rogu (które powinno się zarejestrować jako 0 lub w pobliżu 0: "x" => "219", "y" => "- 311" ... 219 wydaje się być w odpowiednim momencie mierząc odległość od lewej strony okna przeglądarki, ale odległość powinna znajdować się w obszarze zdjęcia)

Aktualnie przechwytuję zdarzenia kliknięcia i współrzędne na zdjęciu za pomocą zwykłego linku (link zawiera inne istotne dane zdjęć) i robienie matematyki (te same obliczenia, które były używane w dokumentach jquery) przed przekazaniem go do mojej aplikacji rails. Wątpię, czy metoda ma wiele wspólnego z błędnymi wartościami, chociaż podejrzewam, że może to być spowodowane matematyką lub jakimś dziwactwem css. W obu przypadkach jestem absolutnie zdumiony.

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

dla X i Y spróbować wykorzystać to:

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

dać mi znać, jeśli to nie zadziała

EDIT: do wyjaśnij - otrzymujesz lewy i górny offset bezpośrednio z elementu dom. Powodem, dla którego proponuję użyć funkcji offset() jQuery, jest to, że jQuery jest bardziej prawdopodobne, że obliczy właściwą przeglądarkę pozycji.

EDYCJA 2: Czy możesz spróbować przypisać zdarzenie kliknięcia do obrazu w przeciwieństwie do linku. Mam podkradające podejrzenie, że związek zgłasza swój top offsetu jako dołu elementu Hermetyzuje ...

Answer 2

Moja funkcja to:

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

wezwanie:

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

Uwaga: used fast float2int.