无法将事件侦听器附加到画布？ [英] Cannot attach Event listener to canvas?

问题描述

我有一些非常简单的代码试图附加一个事件监听器并在mousemove上调用一个函数，这样我就可以在canvas元素中找到鼠标位置：

I've got some very simple code that attempts to attach an event listener and call a function on mousemove, so that I can find the mouse position within a canvas element:

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＃没有方法'addEventListener '

However I get the error: Uncaught TypeError: Object # has no method 'addEventListener'

这到底发生了什么？

推荐答案

getElementsByTagName（）返回 nodeList （就像一个DOM对象数组）所以你需要指定你想要添加监听器的 nodeList 中的哪个元素。

getElementsByTagName() returns a nodeList (like an array of DOM objects) so you need to designate which element in that nodeList you want to add the listener to.

其次，你的事件处理程序 on_canvas_move（）也有与 canvas相同的问题.offsetLeft 将尝试读取nodeList上的 .offsetLeft 属性，而不是DOM元素。这会给你一个未定义的值，并尝试用 undefined 进行数学运算给你 NaN 。

And secondly, your event handler on_canvas_move() also has the same issue as canvas.offsetLeft would be trying to read the .offsetLeft property on the nodeList, not on the DOM element. That would give you an undefined value and trying to do math with undefined gives you 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);
} 

或者，要添加所有这些：

Or, to add all of them:

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

这篇关于无法将事件侦听器附加到画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！