动画HTML5画布 - 事件监听器不止一次触发？

Question

所以我对javascript（以及一般的编码）非常陌生，我已经设法在Animate CC中制作了一个令人难以置信的基本HTML5画布。唯一的问题是，当我回到前一帧时，按钮会重复。

流程：

1. 第1帧 - 控制台消息按钮和下一帧按钮
2. 第2帧 - 上一帧按钮

当移回到前一帧时，按钮会触发两次（即控制台日志消息触发两次）。如果我重复这个过程并移动到下一帧并再次返回第三帧，它将触发三次。

我已经注意到这个帖子：Why are my event listeners firing more than once?

这和我遇到的问题完全相同。但遗憾的是，这个答案适用于as3，我不知道如何为javascript更改它。我一直在努力研究几天，但我真的不明白:(

任何人都可以帮助我，或者你能指出我正确的方向来了解这一点吗？

谢谢！

码：

第1帧：

instance = this;
instance.stop();
instance.messageBTN.on("click", messageTest);
function messageTest(){
    console.log("Button Pressed")

}

instance.nextBTN.addEventListener("click", nextFrame);
function nextFrame(){
instance.gotoAndStop(1);
}

第2帧：

instance = this
instance.backBTN.addEventListener("click", previousFrame);
function previousFrame(){
    instance.gotoAndStop(0);
 }

示例文件：https://wetransfer.com/downloads/0eb9e342cc093fff59645626b9e2fd1e20170308205102/3bafa6

Answer 1

我设法解决了这个问题！

AS3帖子建议删除事件监听器，但我无法弄清楚JS等价物是什么，但现在我知道了！

instance.stop();
//MAKE SURE ALL BUTTONS ARE EVENT LISTENERS
instance.messageBTN.addEventListener("click", messageTest);
function messageTest(){
    console.log("Button Pressed");
}

instance.nextBTN.addEventListener("click", nextFrame);
function nextFrame(){
instance.gotoAndStop(1);
//ADD IN TO REMOVE THE EVENT LISTENER WHEN MOVING TO ANOTHER FRAME
instance.messageBTN.removeEventListener("click", messageTest);
}

Answer 2

做一个变量：

var eventLisBool = false;

将您的代码包含在侦听器中：

if (!eventLisBool) {
// code...
// and at the end of your listener code, include this:
eventLisBool = true;
}

Answer 3

在HTML5 Canvas中，没有像Flash中那样的nextFrame（）或PrevFrame（）。您只需创建一个变量并增加每次点击的数量：

this.stop()
var _this = this;
    var frame = new Number(0);

    _this.next_btn.on('click', function(){
    /*
    Can be used on the main timeline or on movie clip timelines.
    */
    frame++;
    _this.myMovieClip_mc.mySubMovie_mc.gotoAndStop(frame);

    });

    _this.prev_btn.on('click', function(){
    /*
    Can be used on the main timeline or on movie clip timelines.
    */
    frame--;
    _this.myMovieClip_mc.mySubMovie_mc.gotoAndStop(frame);

    });

但你必须设置任何逻辑条件来控制你的变量或函数，否则它会减少/增加有限的帧数