La clave de esta pregunta es la presencia de una bandera oculta en cada método element.click() .

Cada elemento tiene un indicador de clic en progreso asociado, que inicialmente no está configurado.

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

Tan pronto como se activa este método, este indicador cambia de Estado de progess Status == unset a progess Status == active (pseudocódigo)

(luego vuelve a su estado inicial una vez que el código que contiene se ejecuta completamente)

Cuando este indicador está en estado active , se ignora cualquier llamada a este método.

 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>

la bandera oculta actúa de la misma manera si he codificado de esta manera:
reemplaza esta línea:
bt_leaveRoom.click()
a:
if (source !== 'call') bt_leaveRoom.click()

Pero, de hecho, el sistema usa el método de indicador oculto (¿llamado progress flag ?)
que puede ser (en pseudocódigo)

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

Intenté un par de cosas para encontrar una respuesta a esta pregunta. Realmente no he encontrado una respuesta definitiva a lo que está pasando aquí, pero creo que lo que comparto aquí alimenta este excelente problema.

Simplifiqué el código para centrarme en la activación recursiva de eventos.

Código simplificado

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

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

Podemos ver aquí que tenemos dos llamadas para console.log , la primera es para hacer clic en el botón y la segunda es para la llamada a $leaveRoom.click(); . Parece detenerse allí por alguna razón.

Uso dispatchEvent

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

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

Aquí, el evento se activa varias veces (44 para mí), esto podría deberse a la velocidad de su máquina. Sin embargo, parece dejar de activarse eventualmente, así que creo que el mismo fenómeno también está sucediendo aquí.

Usando setTimeout

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

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

Si está buscando una manera de activar infinitamente el evento de clic, independientemente de por qué fallan los métodos anteriores. Esto parece hacer el truco.

Habiendo dicho todo esto, todavía no tengo idea de esta fuerza oculta que detiene la recursividad de los métodos anteriores. Tal vez alguien podría arrojar algo de luz sobre esto.

 const click1 = document.querySelector('#click1') const click2 = document.querySelector('#click2') const click3 = document.querySelector('#click3') click1.addEventListener('click', (event) => { console.log("click1") click2.click() }); click2.addEventListener('click', (event) => { console.log("click2") click3.click() }); click3.addEventListener('click', (event) => { console.log("click3") click1.click() });

 <button id="click1">Click 1</button> <button id="click2">Click 2</button> <button id="click3">Click 3</button>

En realidad, parece que hay una lógica de ruptura de bucle en el manejo de eventos. Los controladores encadenarán felizmente los eventos de entrada del usuario hasta que la interacción inicial envíe un evento duplicado. Entonces ya no enviará ninguno.