事件在递归中多次执行函数答案

【问题标题】：Event executes functions couple times in recursion事件在递归中多次执行函数
【发布时间】：2021-09-06 09:50:22
【问题描述】：

我的主要项目中有类似的问题。在下面，我以简化的方式展示了我的问题。我知道为什么我的代码执行了几次，问题是如何修复它。

HTML 代码：

<body>
    <button id="btn">CLICK ME</button>
    <script src="index.js" defer></script>
</body>

Javascript：

const btn = document.getElementById("btn");

var number = 1;

function load() {
    console.log(number);
    btn.addEventListener('click', (e) => add(e))
};

function add(e) {
    number += 1;
    load();
    e.stopPropation();
}

load();

当然，当我第一次单击按钮时一切都很好，但是当我第二次单击时，按钮执行两次功能，第三次单击四次后，依此类推。我以为e.stopPropation(); 能解决问题，可惜不是。

主要问题：如何杀死翻倍的事件？

【问题讨论】：

标签： javascript recursion event-handling

【解决方案1】：

这里用这个

const btn = document.getElementById("btn");

var number = 1;

function load() {
  console.log(number);
  btn.addEventListener("click", (e) => add(e));
}

function add(e) {
  number += 1;
  load();
  e.stopImmediatePropagation();
}

load();

【讨论】：

谢谢你！这在我的主要项目中也有帮助:)