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

【问题标题】：Cannot attach Event listener to canvas?无法将事件侦听器附加到画布？
【发布时间】：2016-03-14 04:43:44
【问题描述】：

我有一些非常简单的代码，它试图附加一个事件侦听器并在 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'

这里到底发生了什么？

【问题讨论】：

这只需要一个注释-使用 document.getElementsByTagName('canvas')[0].

标签： javascript jquery html canvas

【解决方案1】：

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

【讨论】：

谢谢。如果你能很快澄清为什么我在 x,y 值上得到 NaN？
@Megh - 出于同样的原因。 canvas.offsetLeft 试图在数组上获取 offsetLeft，而不是在该数组中的 DOM 元素上。我更新了答案以显示新版本的on_canvas_move()。
从技术上讲，它返回一个 NodeList，而不是一个数组。
@Dennis - 技术上是正确的，我已经编辑了我的答案以使用该术语，尽管它不会改变解决方案。

【解决方案2】：

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

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

一个建议 - 当您不知道发生了什么时，通过将内容打印到控制台自己弄清楚 - console.log(canvas) 会告诉您。

【讨论】：

.getElements 的复数也应该告诉。