Sé que esta pregunta se ha hecho antes, así que lamento el duplicado, pero ninguna de las respuestas que he visto me ha funcionado.

En mi página tengo algunos elementos que se ven así (con identificaciones distintas):

 <div id="AGTcard" class="popup"> <button type="button" class="close_button" onclick="ClosePopup('AGTcard')">X</button> <div class="info_div scroll"> <p>Anderson (Oak Ridge)-AGT (TN)</p> </div> </div>

Hay un botón en la página que activa una función javascript para que este elemento aparezca en la página. Se supone que la función agrega un detector de eventos al documento para verificar si el usuario hace clic fuera del elemento, y si lo hace, entonces el elemento debe ocultarse nuevamente. Este es mi código javascript:

 function CloseClick(e){ var popups = document.getElementsByClassName('popup') var current_poppup; for (var i=0;i<popups.length;i++){ if (popups[i].style.display == 'block'){ current_poppup = popups[i] } } if (!current_poppup.contains(e.target)){ ClosePopup(current_poppup.id) } } function InfoPopup(in_id){ var popup = document.getElementById(in_id) popup.style.display='block' document.addEventListener('click',CloseClick) console.log('added event listener') } function ClosePopup(in_id){ var popup = document.getElementById(in_id) popup.style.display='none' document.removeEventListener('click',CloseClick) console.log('removed event listener') }

La InfoPopup(in_id) se activa al hacer clic en un botón.

Cada vez que hago clic en el botón para hacer visible el elemento, la función addEventListener se activa con el mismo clic e inmediatamente vuelve a ocultar el elemento. No puedo encontrar una manera de evitar que esto suceda.