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

我有一些非常简单的代码，试图附加一个事件监听器，并呼吁鼠标移动功能，让我可以找到一个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'

这里究竟发生了什么？

来源

2012-09-09 styke

这只是需要一个评论，使用document.getElementsByTagName（'帆布'）[0]。 – kennebec

getElementsByTagName()返回一个nodeList（如DOM对象的数组），所以你需要指定要添加听者哪个元素在于nodeList。

其次，您的事件处理程序on_canvas_move()也具有相同的问题，因为将尝试读取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); 
}

来源

2012-09-09 21:59:42 jfriend00

谢谢。如果你可能很快就可以澄清为什么我会在x，y值上得到NaN？ – styke

@Megh - 出于同样的原因。 'canvas.offsetLeft'试图在数组上获得'offsetLeft'，而不是在数组中的DOM元素上。我更新了我的答案以显示新版本的'on_canvas_move（）'。 – jfriend00

技术上它返回一个NodeList，而不是一个数组。 – Dennis

document.getElementsByTagName()回报你一个数组 - 你要么循环并绑定监听器，或点你需要的元素：

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

一个建议 - 当你不知道发生了什么事情时，用自己的图形输入了控制台的东西 - console.log(canvas)会告诉你。

来源

2012-09-09 22:01:29 moonwave99

带复数的'.getElements'也应该告诉。 –

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

回答

相关问题