[解決済み] クリックイベントリスナーの内部でclick()をトリガーしても無限ループにならないのはなぜですか？

質問

この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を取得したかを知りたいです。

どのように解決するのですか？

この問題のキーとなるのが 隠しフラグ であり、各 element.click() メソッドになります。

各要素は関連するクリック中フラグを持ち、これは初期状態では設定されていません。

doc: https://html.spec.whatwg.org/multipage/interaction.html#dom-click

このメソッドが有効になるとすぐに、このフラグは progess Status == unset から progess Status == active (擬似コード)

(含まれるコードが完全に実行されると初期状態に戻る)

このフラグが active の状態である場合、このメソッドへの呼び出しは無視されます。

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() }