1

キャンバス要素内のマウス位置を見つけることができるように、イベント リスナーをアタッチして mousemove で関数を呼び出そうとする非常に単純なコードがあります。

canvas = document.getElementsByTagName('canvas');
canvas.addEventListener('mousemove', on_canvas_move, false);

function on_canvas_move(ev) {
    var x = ev.clientX - canvas.offsetLeft;
    var y = ev.clientY - canvas.offsetTop;
    $('#status').html(x +', '+ y);
}

ただし、エラーが発生します: Uncaught TypeError: Object # has no method 'addEventListener'

ここで何が起こっているのですか？

4

2 に答える 2

2

getElementsByTagName()nodeList(DOM オブジェクトの配列のような) を返すためnodeList、リスナーを追加する要素を指定する必要があります。

次に、イベント ハンドラーにも、DOM 要素ではなく nodeListのプロパティを読み取ろうとするon_canvas_move()のと同じ問題があります。それはあなたに価値を与え、数学をやろうとするとあなたに与えます.canvas.offsetLeft.offsetLeftundefinedundefinedNaN

1 つだけ追加するには:

canvas = document.getElementsByTagName('canvas');
canvas[0].addEventListener('mousemove', on_canvas_move, false);

function on_canvas_move(ev) {
    var x = ev.clientX - this.offsetLeft;
    var y = ev.clientY - this.offsetTop;
    $('#status').html(x +', '+ y);
}

または、それらすべてを追加するには:

canvas = document.getElementsByTagName('canvas');
for (var i = 0; i < canvas.length; i++) {
   canvas[i].addEventListener('mousemove', on_canvas_move, false);
}

function on_canvas_move(ev) {
    var x = ev.clientX - this.offsetLeft;
    var y = ev.clientY - this.offsetTop;
    $('#status').html(x +', '+ y);
}
于 2012-09-09T21:59:42.343 に答える
0

document.getElementsByTagName()配列を返します。ループしてリスナーをバインドするか、必要な要素を指す必要があります。

document.getElementsByTagName('canvas')[0].addEventListener( ... )

アドバイス - 何が起こっているのかわからないときは、コンソールに出力して自分で調べてください -console.log(canvas)はあなたに言ったでしょう.

于 2012-09-09T22:01:29.143 に答える