为何JavaScript click()函数与事件传播代码未无限执行？

你的代码本质是递归触发事件，理论上会无限循环直到浏览器触发调用栈溢出，你看到的有限输出只是栈溢出前的部分结果，而非事件传播逻辑出错。下面拆解核心问题：

关键误解：事件传播与手动触发的合成事件 #

你混淆了「单个事件的传播链」和「手动触发的新事件」：

• 单个用户点击事件的传播是同一个事件实例从目标元素冒泡到顶层（比如点击item后，事件会从item→container→body依次触发监听器）。
• 但你在监听器里调用element.click()时，会生成一个全新的合成事件实例，这个事件会从头开始自己的传播流程，和之前的事件完全无关。

你的代码执行流程（以初始点击body为例） #

1. 点击body触发其监听器：输出"body clicked"，调用container.click()生成新的container合成事件。
2. container的监听器触发：输出"container clicked"，调用item.click()生成新的item合成事件。
3. item的监听器触发：输出"item clicked"，该合成事件开始冒泡：
   • 冒泡到container，触发其监听器：输出"container clicked"，再次调用item.click()。
   • 冒泡到body，触发其监听器：输出"body clicked"，再次调用container.click()。
4. 上述步骤会不断递归，每次调用都会加深JavaScript调用栈，直到达到浏览器的栈上限。

为什么你只看到6行输出？ #

当调用栈深度超过浏览器允许的最大值（不同浏览器数值不同，通常在几万左右），会抛出Uncaught RangeError: Maximum call stack size exceeded错误，执行终止。你看到的6行只是栈溢出前的最后几次输出，去浏览器控制台的「错误面板」就能看到这个报错信息。

验证方式 #

把代码中的console.log换成计数变量，比如：

let count = 0;
item.addEventListener("click", function () {
  console.log("item clicked", ++count);
});

container.addEventListener("click", function () {
  console.log("container clicked", ++count);
  item.click();
});

body.addEventListener("click", function () {
  console.log("body clicked", ++count);
  container.click();
});

运行后会看到计数不断增加，直到栈溢出停止，这就能证明代码确实在无限递归，只是被浏览器的栈限制终止了。

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