無法將事件偵聽器附加到畫布上？

我有一些非常簡單的代碼，試圖附加一個事件監聽器，並呼籲鼠標移動功能，讓我可以找到一個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'也應該告訴。 –

無法將事件偵聽器附加到畫布上？

回答

相關問題