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

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

但是我得到了错误：uncaughttypeerror:Object#没有方法'addEventListener'

这到底是怎么回事

getElementsByTagName（）

返回一个

nodeList

（类似于DOM对象数组），因此需要指定要将侦听器添加到该

nodeList

中的哪个元素

其次，canvas\u move（）上的事件处理程序

也与
canvas有相同的问题。offsetLeft
将尝试读取节点列表上的
。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);
} 

canvas=document.getElementsByTagName（'canvas'）；
对于（变量i=0；i
document.getElementsByTagName（）

返回一个数组-您应该循环该数组并绑定侦听器，或者指向所需的元素：

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

---

一个建议-当你不知道发生了什么事情时，你可以自己把东西打印到控制台-

console.log（canvas）

会告诉你的。

这只需要一个注释-使用document.getElementsByTagName（'canvas'）[0]。带复数的

.getElements

也应该告诉你。谢谢。如果你能很快澄清为什么我在x，y值上得到NaN？@Megh-出于同样的原因

canvas.offsetLeft

正在尝试在数组上获取

offsetLeft

，而不是在该数组中的DOM元素上。我更新了我的答案，以便在画布上显示新版本的

\u move（）

。从技术上讲，它返回的是节点列表，而不是数组。@Dennis-从技术上讲，这是正确的，我编辑了我的答案以使用该术语，尽管它不会改变解决方案。