Animate HTML5 Canvas - 事件监听器不止一次地发射？

所以我对javascript（以及一般编码）非常陌生，并且我在Animate CC中设法制作了一个令人难以置信的基本HTML5画布。唯一的问题是，当我回到前一帧时，按钮会重复出现。Animate HTML5 Canvas - 事件监听器不止一次地发射？

流量：

帧1 - 控制台消息按钮&下一帧按钮
帧2 - 上一帧按钮

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

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

这是因为我有完全相同的问题。但不幸的是，这个答案是为as3，我不知道如何改变它的JavaScript。我一直在努力，现在研究了好几天，但我真的不明白:(

谁能帮我请，或者你可以点我在正确的方向，了解这一点？

谢谢！

CODE：

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

来源

2017-03-08 Cowen

需要看到一些代码，看看其中u出了错 –

请编辑您的问题，包括你的代码，而不是将它添加注释。这使得它更容易阅读:) –

天哪，你可以告诉我这是多么新 - 对所有这些抱歉。根据要求编辑并附上文件:) – Cowen

做一个变量：

var eventLisBool = false;

与听众内环绕代码：

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

来源

2017-03-09 01:05:23

不幸的是，这并没有工作:(我可以问，代码试图做什么？ – Cowen

@Cowen它是检查事件是否已经多次触发，如果有，事件侦听器的第二次触发将被忽略 –

@Cowen哎呀！我发现了我的错误，在设置变量时放置var，并确保变量被设置在事件侦听器之外 –

我设法解决这个问题！

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); 
}

来源

2017-03-09 10:37:46 Cowen

Animate HTML5 Canvas - 事件监听器不止一次地发射？

回答

相关问题