多次调用事件绑定函数后，按钮点击重复触发问题求解

你遇到的问题是每次调用my_Func都会给按钮新增一个点击事件监听，最终点击时所有绑定的监听都会执行，所以弹出多次alert。以下是几种可行的解决方法：

方法一：用闭包标志位控制仅绑定一次 #

通过闭包保存状态变量，确保仅在第一次调用my_Func时完成事件绑定：

console.clear();

const my_Func = (() => {
  let isEventBound = false;
  return function() {
    // 保留你的其他业务代码
    if (!isEventBound) {
      document.querySelector('#return-toggle').addEventListener('click', e => {
        return_status = "yes";
        alert("Hello!!!!");
      });
      isEventBound = true;
    }
  };
})();

my_Func();
my_Func();
my_Func();
my_Func();

方法二：先移除监听再添加（需保留函数引用） #

把事件处理函数抽成独立函数，每次调用my_Func时先移除旧监听，再添加新监听，确保最终只有一个监听生效：

console.clear();

// 抽离独立的事件处理函数
function handleButtonClick(e) {
  return_status = "yes";
  alert("Hello!!!!");
}

function my_Func() {
  // 保留你的其他业务代码
  const btn = document.querySelector('#return-toggle');
  btn.removeEventListener('click', handleButtonClick);
  btn.addEventListener('click', handleButtonClick);
}

my_Func();
my_Func();
my_Func();
my_Func();

方法三：利用元素自定义属性标记绑定状态 #

通过给按钮添加自定义data-*属性，判断是否已经绑定过事件，避免重复绑定：

console.clear();

function my_Func() {
  // 保留你的其他业务代码
  const btn = document.querySelector('#return-toggle');
  if (!btn.dataset.hasBoundEvent) {
    btn.addEventListener('click', e => {
      return_status = "yes";
      alert("Hello!!!!");
    });
    btn.dataset.hasBoundEvent = 'true';
  }
}

my_Func();
my_Func();
my_Func();
my_Func();

补充说明 #

你提到的“去重querySelector”没有作用，因为每次调用querySelector获取的都是同一个按钮元素，问题根源是重复绑定事件，而非获取元素的方式。

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