【发布时间】：2011-07-08 05:59:06
【问题描述】：
我一直在尝试使用严格的 HTML5 和 JavaScript 创建游戏，但遇到了一个我似乎无法解决的问题。为了尝试避免使用第三方类/库，我正在创建自己的类来处理 HTML5 画布元素中的自定义按钮。我几乎让它们工作，然后在意识到我的事件侦听器每次重新绘制画布时都会相互叠加之后不得不重新编写大部分脚本（我之前在 mouseDown 事件侦听器中使用了一个匿名函数，但是此后已改用其他方法）。
首先，我的事件侦听器现在使用一个函数，该函数包含对我尝试使用的任何按钮的引用。然后调用我的原型的 mouseDownFunc，它检查按钮实例尺寸的边界，然后最后调用引用的onPress()（这实际上是每个按钮都使用的重写方法，因此每个按钮在按下时都有一组自定义指令） .
所以，如果您仍在继续（我知道，没有看到完整的脚本会有点混乱），问题是因为我的事件侦听器使用相同的函数，它们会覆盖之前的事件侦听器，所以只有 last 按钮才能正确添加功能。综上所述，如何向 canvas 元素添加多个事件侦听器，它们都使用相同的功能，而不会删除以前的事件侦听器。请注意，我正在尝试在不使用 jQuery 或其他第三方扩展的情况下执行此操作。
如果需要有关我的代码的更多信息以便更容易理解，请告诉我。提前感谢任何类型的反馈。
编辑：也许这可能会有所帮助。请注意，这不是完整的代码，但包含要点：
添加按钮：
this.test_button = new CreateButton(this, 'test_button');
this.test_button.onPress = function() {
alert('Blue button works!');
};
this.test_button.create(200, 50, 30, 200, 'text');
在按钮上使用create() 时，会检查并存储变量以及保存所有当前按钮的数组（因此可以在任何时候引用它们）。然后运行：this.that.custom_canvas.addEventListener('mousedown', this.create.prototype.mouseDownFunc, false);
当 mouseDownFunc 被调用时，会发生这种情况：
CreateButton.prototype.create.prototype.mouseDownFunc = function(e) {
var mouse_x = e.clientX-this.offsetLeft;
var mouse_y = e.clientY-this.offsetTop;
// Check if the mini-button button was actually clicked
if(mouse_x >= test2.x && mouse_y >= test2.y && mouse_x <= (test2.x + test2.width) && mouse_y <= (test2.y + test2.height)){
alert('clicked and working!');
test2.onPress(); // A reference to the saved function
}
};
目前，我的 test2 是对任何给定对象的引用——它是一个全局变量，但在我解决了这些其他问题之后，我将处理摆脱全局变量（我知道，我知道——它是只是一个临时的快速修复）。
【问题讨论】：
-
还不错；我更新了我的帖子。
-
您对原型的明确引用看起来很可疑。 “this.create.prototype.mouseDownFunc”作为显式回调和“CreateButton.prototype.create.prototype.mouseDownFunc”声明没有多大意义。我怀疑您可能会覆盖每个按钮实例上的原型函数。这就是为什么“最后一个获胜”是一个错误。
标签： javascript html button canvas addeventlistener