在 Animate CC HTML5 Canvas 中的帧之间跳转时如何删除 addEventListener？

Question

当我在帧之间跳转时，我似乎无法删除 addEventListeners 。当我来回跳转时，addEventListeners似乎仍然堆积起来：

第 1 帧代码：

this.stop();

this.arrowForward_btn.addEventListener("click", arrow_btnClickForward.bind(this));

function arrow_btnClickForward() {
    this.arrowForward_btn.removeEventListener("click", arrow_btnClickForward.bind(this));
    console.log("went forward");
    alert("alert: went forward!");
    this.gotoAndStop(1);
}

第 2 帧代码：

this.arrowBack_btn.addEventListener("click", arrow_btnClickBack.bind(this));

function arrow_btnClickBack() {
    this.arrowBack_btn.removeEventListener("click", arrow_btnClickBack.bind(this));
    console.log("went back!");
    alert("alert: went back!");
    this.gotoAndStop(0);
}

如何删除 addEventListeners 以便它们不会堆叠起来？

---

更新：被告知有关 evt.remove();所以我在我的代码中使用了它并且它有效：

第 1 帧代码：

this.stop();

this.arrowForward_btn.addEventListener("click", arrow_btnClickForward.bind(this));

function arrow_btnClickForward() {
    console.log("went forward");
    alert("alert: went forward!");
    this.gotoAndStop(1);
    evt.remove();
}

第 2 帧代码：

this.arrowBack_btn.addEventListener("click", arrow_btnClickBack.bind(this));

function arrow_btnClickBack(evt) {
    console.log("went back!");
    alert("alert: went back!");
    this.gotoAndStop(0);
    evt.remove();
}

Answer 1

您的更新更好，但它可能有助于解释一些事情：

• 当您使用bind()时，它会生成一个新的唯一闭包。每次。
• 当您删除事件时，您需要使用这个精确闭包。即使使用相同的参数，生成另一个也是行不通的。

请注意，evt.remove() 应该适合您，但在第一个示例（第 1 帧代码）中，事件处理程序没有 evt 参数。

CreateJS 中的一些内容可能会有所帮助：

1. on() 方法是 addEventListener 的快捷方式，它可以帮助您执行诸如传递作用域之类的操作。

this.arrowForward_btn.on("click", arrow_btnClickForward, this);

2. 它还有一个 once 参数，因此如果您知道您的事件将触发一次，它可以被自动删除。

this.arrowForward_btn.on("click", arrow_btnClickForward, this, true);

3. 如果您仍然想手动管理，on() 返回生成的闭包。您可以使用 off() 轻松删除。

var handler = this.arrowForward_btn.on("click", arrow_btnClickForward, this);
// later
this.arrowForward.off("click", handler);

希望这能让您更好地理解 CreateJS 中的事件处理程序，并且它们的某种组合将会起作用。

--

了解您可以在第一帧中编写所有代码也可能会有所帮助，因为 CreateJS 在动画剪辑初始化时会在每一帧中引导实例。因此 arrowBack_btn 也将存在于第 1 帧中。您只需添加代码一次，并确保它只运行

if (this.inited == false) {
  this.inited = true;

  this.arrowForward_btn.on("click", arrow_btnClickForward, this);
    this.arrowBack_btn.on("click", arrow_btnClickBack, this);

    function arrow_btnClickForward() {
        console.log("went forward");
        alert("alert: went forward!");
        this.gotoAndStop(1);
    }

    function arrow_btnClickBack(evt) {
        console.log("went back!");
        alert("alert: went back!");
        this.gotoAndStop(0);
    }

}

我没有对此进行测试，但它应该可以工作：D