클릭 이벤트 위치 (Y)가 너무 높습니다.

Question

캔버스 요소가 있고 그것을 클릭하면 e.clientX (Y) 또는 e.screenX (Y)로 클릭 위치가 표시됩니다. 이상한 일이 일어나고 있습니다. Y 값은 항상 너무 높습니다. 이 이미지를보십시오 : http://img840.imageshack.us/img840/268/eventq.jpg. 어떤 이데아가 그렇게 높은 이유는 무엇입니까?

Answer 1

나는 당신이 무슨 일이 일어 났는지 말할 수있을 것이라고 확신한다. 캔버스에 상대적인 좌표는 아니지만 뷰포트를 기준으로합니다. 또한 패딩을 포함하는지 여부에 따라 브라우저에 따라 다릅니다.

정상 좌표로 변환하십시오. 귀하의 경우에는 캔버스의 오프셋을 빼는 작업이 필요합니다.

Answer 2

ClientX와 Y를 가져 와서 캔버스의 위치를 ​​빼면됩니다.

이 예

불필요하게 자세한 그냥 단계를 보여주는 것입니다 :

var canvas = document.getElementById('game'); 
var canvasX, canvasY; 

canvas.addEventListener('click', function(event) { 
    canvasX = canvas.offsetLeft; 
    canvasY = canvas.offsetTop; 
    var eventX = event.clientX; 
    var eventY = event.clientY; 
    var relX = eventX - canvasX; 
    var relY = eventY - canvasY; 
    alert('X = ' + relX + ', Y = ' + relY); 
}); 

근무 샘플 : http://jsfiddle.net/JfhJF/