jquery를 사용하여 링크 된 이미지의 클릭에 대한 정확한 위치를 얻으십시오.

Question

클릭 (Facebook, flickr, 등)을 통해 사진에 직접 태그를 지정할 수있는 앱을 개발 중입니다. 그러나 사진에 대한 클릭에 대해 올바른 좌표를 등록하는 것처럼 보이지 않습니다. 문제는 x 좌표가 브라우저 윈도우 내에서 (사진 내에서가 아니라) 절대 클릭 x 거리 인 것처럼 보이지만, y 좌표는 종종 음수이거나 엄청나게 작습니다 (상단 근처 음, 바닥 근처 작은). 이 값들은 왼쪽 상단 근처를 클릭하면 얻을 수 있습니다 ("0"또는 "0"인 것으로 등록해야 함 : "x"=> "219", "y"=> "- 311"... 219 브라우저 창의 왼쪽에서 거리를 측정하지만 사진 영역 내에 있어야 함)

현재 일반 링크를 사용하여 사진에서 클릭 이벤트와 좌표를 캡처하고 있습니다 (해당 링크에는 다른 관련 사진 데이터가 포함되어 있음).) 및 내 레일 애플 리케이션에 따라 전달하기 전에 수학 (jquery 워드 프로세서에서 사용되는 동일한 계산). 나는이 방법이 잘못된 값들과 많은 관련이 있다는 것을 의심스럽게 생각합니다. 비록 수학이나 어떤 CSS 기발한 것이 잘못 될 수 있다고 생각합니다. 어느 쪽의 경우라도, 나는 절대적으로 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

당신의 x의

와 y는이를 사용하려고 :에 :

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

가 그

편집을 작동하지 않는 경우 알려주세요 clarify - dom 요소에서 왼쪽 및 위쪽 오프셋을 직접 가져옵니다. 내가 jQuery 오프셋() 함수를 사용하는 것이 좋습니다 이유는 jQuery가 브라우저 간 올바른 위치를 계산할 가능성이 높기 때문입니다.

EDIT 2 : 클릭 이벤트를 링크와 대조하여 이미지에 할당 해 주시겠습니까? 내가

Answer 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.