En el fragmento a continuación, si hace clic en el botón uno, la secuencia de comandos escucha ese clic, y si está en un navegador Chrome, la secuencia de comandos hará clic en el botón dos mediante programación y luego pasará un mensaje a la consola. Todo esto funciona.
Con cada clic en el botón uno, veo que cada mensaje de la consola se duplica con respecto al anterior... Es casi como si hacer clic en el botón uno aumentara el número de clics en el botón dos.
Esta pregunta es doble:
¿Por qué el primer clic en el botón uno no devuelve ningún mensaje de consola?
¿Cómo hago clic en el botón uno y hago que devuelva solo un clic en el botón dos?
let chromeCheck = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); one.addEventListener('click', function() { if (chromeCheck) { (function playVideo() { document.getElementById('two').click(); two.addEventListener('click', function() { console.log('Button two was clicked'); }) })(); } else { console.log('Button two was not clicked.') } }) <button class="button" id="one">Button One</button> <button class="button" id="two">Button Two</button>Has desordenado un poco tu pedido. En primer lugar, está haciendo clic en el botón programáticamente before de agregar el detector de eventos al botón dos. Por lo tanto, no obtendrá un registro de la consola con el primer clic. En segundo lugar, está adjuntando un detector de eventos al botón dos en every clic del botón uno. Entonces, cada vez que haga clic en el botón uno, se adjuntará otro registro de la consola al botón dos. Para evitar eso, simplemente agregue el detector de eventos para el botón dos fuera del detector de clics para el botón uno.
let chromeCheck = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); if (chromeCheck) { two.addEventListener('click', function() { console.log('Button two was clicked'); }) } one.addEventListener('click', function() { if (chromeCheck) { document.getElementById('two').click(); } else { console.log('Button two was not clicked.') } }) <button class="button" id="one">Button One</button> <button class="button" id="two">Button Two</button>