在 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() 时，它会生成一个新的唯一闭包。每一次。
您需要在删除事件时使用此 exact 闭包。生成另一个，即使使用相同的参数，也不行。

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

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

on() 方法是 addEventListener 的快捷方式，可以帮助您完成传递范围等操作

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

它还有一个 once 参数，所以如果您知道您的事件将触发一次，它可以获得 auto-removed。

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

如果还想手动管理，on()returns生成的闭包。您可以使用 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

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

How to remove addEventListener when jumping between frames in Animate CC HTML5 Canvas?

javascript

html5-canvas

createjs

animate-cc