gpt4 book ai didi

javascript - 无法将事件监听器附加到 Canvas ?

转载 作者:行者123 更新时间:2023-11-30 18:19:52 25 4
gpt4 key购买 nike

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

但是我收到错误:Uncaught TypeError: Object # has no method 'addEventListener'

这里到底发生了什么?

最佳答案

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

其次,您的事件处理程序 on_canvas_move() 也有与 canvas.offsetLeft 尝试读取 .offsetLeft 相同的问题nodeList 上的属性,而不是 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);
}

关于javascript - 无法将事件监听器附加到 Canvas ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12343331/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com