无法将事件侦听器附加到画布?

时间:2012-09-09 21:55:58

标签: javascript jquery html html5 canvas

我有一些非常简单的代码试图附加一个事件监听器并在mousemove上调用一个函数,这样我就可以在canvas元素中找到鼠标位置:

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

但是我收到错误:未捕获TypeError:对象#没有方法'addEventListener'

这到底发生了什么?

2 个答案:

答案 0 :(得分:2)

getElementsByTagName()返回nodeList(就像一个DOM对象数组),因此您需要指定要添加侦听器的nodeList中的哪个元素。

其次,您的事件处理程序on_canvas_move()也有与canvas.offsetLeft尝试读取nodeList上的.offsetLeft属性而不是DOM元素相同的问题。这会为您提供undefined值并尝试使用undefined进行数学运算,为您提供NaN

只添加一个:

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

答案 1 :(得分:0)

document.getElementsByTagName()返回一个数组 - 你应该循环它并绑定监听器,或者指向你需要的元素:

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

建议 - 当你不知道发生了什么时,通过将东西打印到控制台来自己计算 - console.log(canvas)会告诉你的。