动画HTML5canvas – 事件监听器不止一次触发?

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

流程:

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

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

我已经注意到这个post了: 为什么我的事件监听器不止一次触发?

这和我遇到的问题完全相同。 但不幸的是,这个答案是针对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

我设法解决了这个问题!

AS3post建议删除事件监听器,但我无法弄清楚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); } 

做一个变量:

 var eventLisBool = false; 

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

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