3

Cada que se hace clic en un botón aparece un <div id="fondonegro"> el cual contiene información tipo menú. Cuando no se haga clic en <div id="fondonegro"> que haga un display:none con Javascript.

Es un botón duplicado, el 1er boton tiene como id="1" y el segundo id="2". Cuando se haga clic en id="1" hace la función menu(), y si se hace clic en id="2" hace menu1()

Quisiera que cuando no se haga clic en <div id="fondonegro"> desaparezca.

function menu() {
    document.getElementById("fondonegro").style.display = 'block';
    document.getElementById("2").style.display = 'block';
    document.getElementById("1").style.display='none';
    drop();
}
function menu1(){
    document.getElementById("fondonegro").style.display = 'none';
    document.getElementById("2").style.display = 'none';
    document.getElementById("1").style.display='block';
}

function drop(){
    window.onclick = function(event) {
          if (!event.target.matches('#fondonegro')) {
             menu1();
        }
    }
}

2 respuestas 2

1

Tomado de esta respuesta de stackoverfow en ingles, lo que hace escuchar el evento click en todo el document para ocultar el componente DOM en tu caso #fondonegro pero para que no se oculte el elemento cuando haces click en el mismo elemento, debe verificar si este no esta en el chain de componentes que originaron el evento onClick usando closest.

$(document).click(function(event) { 
    if(!$(event.target).closest('#fondonegro').length) {
        if($('#fondonegro').is(":visible")) {
            $('#fondonegro').hide();
        }
    }        
})

Ojo que utiliza jQuery

0

Simplemente añade un handler para el evento click en document y mira si el objetivo de dicho evento es #fondonegro o sus hijos.

Ejemplo

let back = document.getElementById('fondonegro');
let open = document.getElementById('open');


open.addEventListener('click', function() {
  back.style.display = 'inline-block';
});

document.addEventListener('click', function(e) {
  let target = e.target;
  let children = [].map.call(back.children, (c) => c);

  if (target === open) {
    return;
  }

  if (target !== back && !children.includes(target)) {
    back.style.display = 'none';
  }
});
#fondonegro {
  background-color: #000;
  display: none;
  margin-top: 40px;
  padding: 25px;
}

#fondonegro #hijo {
  background-color: #fff;
  padding: 10px;
}
<button id="open">Abrir</button>
<br />
<div id="fondonegro">
  <div id="hijo">
    Soy un hijo de #fondonegro
  </div>
</div>

Si #fondonegro tiene hijos que deben ser clickables, entonces, es necesario verificiar que, además de que la fuente del click no fue #fondonegro tampoco lo sean sus hijos. Esto se logra en la condición:

(target !== back && !children.includes(target))

De esta manera te aseguras que desaparezca solo si no se ha hecho click fuera del elemento.


Nota: El código presente usa características de ES6 como Array#includes. Si se desea usar ES5 debes reemplazarlo por children.indexOf(target) === -1.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.