1

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

但是我得到了错误：未捕获的类型错误：对象#没有方法'addEventListener'

这里到底发生了什么？

4

2 回答 2

2

getElementsByTagName()返回一个nodeList（如 DOM 对象数组），因此您需要指定nodeList要将侦听器添加到的元素。

其次，您的事件处理程序也存在与尝试读取nodeList 上的属性而不是 DOM 元素上的属性on_canvas_move()相同的问题。这会给你一个价值，并尝试用给你做数学。canvas.offsetLeft.offsetLeftundefinedundefinedNaN

仅添加一个：

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);
}
于 2012-09-09T21:59:42.343 回答
0

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

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

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

于 2012-09-09T22:01:29.143 回答