javascript - Why doesn't triggering click() inside a click event listener cause an infinite loop?

Question

Can someone explain the program flow of this JavaScript code:

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>

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.

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

As soon as this method is activated, this flag changes from progess Status == unset to progess Status == active (pseudo code)

(then it returns to its initial status once the code it contains is fully executed)

When this flag is in the active state, then any call to this method is ignored.

---

Here is my original post to show the execution sequence of `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>