javascript - 无法将事件监听器附加到 Canvas ？

Question

我有一些非常简单的代码，尝试附加一个事件监听器并在 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);
}   

但是我收到错误:Uncaught TypeError: Object # has no method 'addEventListener'

这里到底发生了什么？

Answer 1

getElementsByTagName() 返回一个 nodeList(就像一个 DOM 对象数组)所以你需要指定你想要的 nodeList 中的哪个元素将监听器添加到。

其次，您的事件处理程序 on_canvas_move() 也有与 canvas.offsetLeft 尝试读取 .offsetLeft 相同的问题nodeList 上的属性，而不是 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);
}