🐛 📤 Registrar multiples eventos al mismo elemento para clic fuera #49

enflujo · Nov 4, 2023 · 8effc63 · 8effc63
1 parent 55708ed
commit 8effc63
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 9 deletions.
diff --git a/aplicaciones/www/src/componentes/FichaTecnica.astro b/aplicaciones/www/src/componentes/FichaTecnica.astro
@@ -54,13 +54,13 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
   const abrirFicha = document.getElementById('abrirFicha');
 
   // Cerrar ficha al hacer click afuera
-  document.body.onclick = (evento) => {
+  document.body.addEventListener('click', (evento) => {
     if (evento.target === abrirFicha) return;
 
     if (!(infoAdicional === evento.target || infoAdicional.contains(evento.target as Node))) {
       infoAdicional.classList.remove('abierta');
     }
-  };
+  });
 </script>
 
 <style lang="scss">
@@ -71,17 +71,14 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
     background-color: var(--blancoMarfil);
 
     #fichaTecnica {
-      width: 20vw;
+      width: 40vw;
       min-width: 300px;
-      flex-direction: column;
       border: solid 2px var(--azulViejo);
       border-radius: 15px;
       color: var(--azulViejo);
       background-color: var(--blancoMarfil);
       text-align: center;
       z-index: 9;
-      left: 23vw;
-      top: 19vh;
       font-variation-settings:
         'MONO' 0,
         'CASL' 0,

diff --git a/aplicaciones/www/src/componentes/MenuAnios.astro b/aplicaciones/www/src/componentes/MenuAnios.astro
@@ -50,13 +50,13 @@
   });
 
   // Cerrar menú de años al hacer click por fuera
-  document.body.onclick = (evento) => {
+  document.body.addEventListener('click', (evento) => {
     if (evento.target === añoElegido) return;
 
     if (!(menuAños === evento.target || menuAños.contains(evento.target as Node))) {
       añosOcultos.classList.remove('abierto');
     }
-  };
+  });
 </script>
 
 <style lang="scss" is:global>
@@ -71,7 +71,6 @@
     font-size: 0.9em;
     width: fit-content;
     color: var(--moradoProfundo);
-    margin: 1em;
 
     #añoElegido {
       border: 1px solid var(--moradoProfundo);