Question

我一直在尝试使用严格的HTML5和JavaScript创建游戏，并遇到了一个我似乎无法解决的问题。为了尝试避免使用第三方类/库，我正在创建自己的类来处理HTML5 canvas元素中的自定义按钮。我几乎让他们工作，然后不得不重新编写大部分脚本后意识到每次画布重新绘制时我的事件监听器都不断添加（我之前在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是对任何给定对象的引用 - 它是一个全局变量，但在我解决了这些其他问题之后，我将处理摆脱全局var（我知道，我知道 - 它是只是一个临时的快速修复。）

Answer 1

也许代替每个可能的按钮的事件监听器，并检查函数中的框大小，您可以创建一个调用路由函数的单个事件来检查事件发生在元素上的哪个位置，然后委托给另一个功能

Answer 2

您需要设计一些东西来处理程序中的事件派发。您似乎拥有使其侦听器全部无组织的组件。您可以构建一个树数据结构（https://en.wikipedia.org/wiki/Tree_%28data_structure%29），它是组件中事件派发的层次结构（例如按钮，文本区域等）。这个想法是当遍历树时，事件将以有序的方式处理。将根据用户与您的程序交互的方式重新组织树。举一个简单的例子，启动这个树可能会优先考虑最近绘制的组件（在一些包含要绘制的所有内容的列表的结构中）作为事件监听器首先接收事件处理。然后，如果一个组件被另一个组件阻塞，那么被阻止的组件（如覆盖按钮的按钮）可能会被禁用或计划在以后发生，具体取决于您的实现。当然，您的实现可能更复杂，但您需要跟踪事件处理。 Java使用组件层次结构数据结构来处理各种GUI事件，您可以在这里了解更多信息http://docs.oracle.com/javase/tutorial/uiswing/concurrency/index.html

HTML5画布上的多个事件侦听器

2 个答案: