Estoy tratando de lograr la siguiente funcionalidad: una vez que el usuario ha hecho clic en un botón, quiero agregar un detector de eventos de clic al elemento de la ventana para alertar un mensaje (digamos).
Considere el siguiente fragmento para este propósito:
<button id="b1">click</button> <script> document.querySelector("#b1").addEventListener('click', () => { window.addEventListener("click", () => { alert("hello"); }); }) </script>Pero, desafortunadamente, el código anterior también alerta el mensaje cuando el usuario inicialmente hace clic en el botón (que no quiero). ¿Alguna idea sobre cómo puedo lograr la funcionalidad?
Sería mejor agregar el detector de eventos de clic de ventana y tener un indicador para determinar si debe aparecer la alerta.
El problema con el método que está utilizando es que cada vez que un usuario hace clic en el botón, agrega un nuevo detector de eventos a la ventana. Esto luego se apilará y disparará varias veces por cada clic en el documento.
Para evitar que el clic del botón pase al documento y también active el detector de eventos de la ventana, puede usar el método stopPropagation() del evento como se muestra a continuación.
let hasButtonBeenClicked = false; window.addEventListener("click", () => { if(hasButtonBeenClicked) { alert("hello"); hasButtonBeenClicked = false; } }); document.querySelector("#b1").addEventListener('click', (e) => { e.stopPropagation() hasButtonBeenClicked = true; }) <button id="b1">click</button>