为什么在click事件侦听器内部触发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

Answer 1

这个问题的关键是每个元素上都存在一个隐藏标志。click()方法。

每个元素都有一个关联的click in progress标志，该标志最初是未设置的。

文档:https://html.spec.whatwg.org/multipage/interaction.html#DOM-单击

（然后，一旦它包含的代码完全执行，它就返回到它的初始状态）

当此标志处于active状态时，则忽略对此方法的任何调用。

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

function lrFct( )
  {
  let source = origin
  console.log('first console.log', counter++ , source)

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

bt_leaveRoom.addEventListener('click',  lrFct )

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