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

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

这到底发生了什么？

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

Answer 2

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

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

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

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

2 个答案: