Clickイベント位置（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/