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>
the Hidden Flag act like in the same way if I have coded this way :
replace this line:
bt_leaveRoom.click()
to:
if (source !== 'call') bt_leaveRoom.click()
But in fact the system use the method hidden flag (named progress flag ?)
which can be (in pseudo code)
if (progress_flag_of_bt_leaveRoom.click() is unset) do { bt_leaveRoom.click() }