javascript - 为什么在单击事件监听器中触发 click() 不会导致无限循环？

Question

谁能解释一下这段 JavaScript 代码的程序流程:

const $leaveRoom = document.querySelector('#leave-button');
let a = 1;
$leaveRoom.addEventListener('click', () => {
  console.log(a);
  console.log("check");
  a++;
  $leaveRoom.click();
  console.log(a);
  a++;
});

<button id="leave-button">Leave Room</button>

The Output was:
1
check
2
check
3
4

这个问题可能听起来很愚蠢，但我是 JavaScript 新手。我无法理解这段代码的程序流程。我想知道我是如何在输出中得到 3 和 4 的。

Answer 1

The key to this question is the presence of a hidden Flag on each element.click() method.

Each element has an associated click in progress flag, which is initially unset.

文档: https://html.spec.whatwg.org/multipage/interaction.html#dom-click
一旦激活此方法，此标志将从 progess Status == unset 更改。至 progess Status == active (伪代码)
(一旦它包含的代码被完全执行，它就会返回到它的初始状态)
当此标志位于 active 中时状态，则忽略对该方法的任何调用。


这是我的原始帖子，显示了 `console.log()` 的执行顺序

const bt_leaveRoom = document.querySelector('#leave-button')
var counter = 0
var origin  = 'event clic'

bt_leaveRoom.addEventListener('click', () => 
  {
  let source = origin
  console.log(`_first console.log(): counter = ${ ++counter }, origin = ${source}`)

  origin = 'call'
  bt_leaveRoom.click()
  
  console.log(`second console.log(): counter = ${ ++counter }, origin = ${source}`)
  })

<button id="leave-button">Leave Room</button>

如果我这样编码，隐藏标志的行为方式相同:
替换这一行: bt_leaveRoom.click()至: if (source !== 'call') bt_leaveRoom.click()但实际上系统使用了隐藏标志的方法(命名为 progress flag？)
可以是(在伪代码中)

if (progress_flag_of_bt_leaveRoom.click() is unset) do { bt_leaveRoom.click() }