Animate中多按钮绑定同一点击事件报错，求解决方法

这个错误的核心原因其实很直观——你要绑定事件的按钮不在当前运行代码的帧里。Animate（原Flash）中，只有当前显示的帧里的元素才会被初始化并存在于舞台上，那些在其他帧的按钮，在当前帧执行代码时还没被创建，所以this[item]会返回undefined，自然就会抛出"Cannot read property 'addEventListener' of undefined"的错误。

另外还有一个隐藏的坑：即使按钮存在，你原来代码里点击事件的this也会指向触发点击的按钮本身，而不是舞台，所以this.gotoAndStop(0)根本不会执行跳帧操作。

下面给你两种可行的解决思路：

思路一：全局遍历+存在性判断+绑定正确的作用域 #

修改你的代码，先判断按钮是否存在，同时提前保存舞台的this指向，避免点击事件里的作用域混乱：

var btns = ["btncasco","btncasco1","btncasco2"]; 
var stageRef = this; // 保存舞台的引用，避免作用域丢失

btns.forEach(function(item) {
  var currentBtn = stageRef[item];
  // 先检查按钮是否在当前帧存在，再绑定事件
  if (currentBtn) {
    currentBtn.addEventListener("click", function() {
      stageRef.gotoAndStop(0); // 用保存的舞台引用来执行跳帧
    });
  }
});

不过这种方式需要注意：你需要在所有包含这些按钮的帧上都运行这段代码，否则切换到其他帧时，新显示的按钮不会被绑定事件。

思路二：分帧绑定（更稳妥） #

既然按钮分布在不同帧，不如直接在每个按钮所在的关键帧上单独绑定事件，这样只会处理当前帧存在的按钮，完全避免不存在元素的问题：

比如在包含btncasco的帧上，添加代码：

this.btncasco.addEventListener("click", () => {
  this.gotoAndStop(0);
});

在包含btncasco1的帧上，添加代码：

this.btncasco1.addEventListener("click", () => {
  this.gotoAndStop(0);
});

这种方式虽然看起来重复，但逻辑更清晰，也不会出现跨帧元素未初始化的问题，适合按钮分散在不同帧的场景。

总结一下你原来代码的两个问题 #

1. 未判断元素存在性：跨帧访问不存在的按钮，导致undefined调用方法报错；
2. 作用域错误：点击事件内的this默认指向按钮实例，而非舞台，跳帧代码无法生效。

内容的提问来源于stack exchange，提问作者Yourdaman