Window event, when you do not click on a div disappear (Javascript)

Question

Window event, when you do not click on a div disappear (Javascript)

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

Each time a button is clicked, a <div id="fondonegro"> appears which contains menu type information. When you do not click on <div id="fondonegro"> that makes a display:none with Javascript.

It is a duplicate button, the 1st button has as id="1" and the second id="2" . When you click on id="1" you do the function menu() , and if you click on id="2" do menu1 ()

I would like that when you do not click on <div id="fondonegro"> disappear.

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();
        }
    }
}

javascript html css

asked by Omar Montoya 13.03.2017 в 20:32

source

2 answers

How to know which CheckBox were selected To be able to Update how do I avoid hiding the content in the ionic tab?

score 0 · Answer 1

Taken from this stackoverfow answer English, what makes the event click on the document to hide the DOM component in your case #fondonegro but for the element not to be hidden when you click on the same element, you should check if this it is not in the chain of components that originated the onClick event using closest.

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

Eye using jQuery

score 0 · Answer 2

Simply add a handler for the event click in document and see if the goal of that event is #fondonegro or its children.

Example

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>

If #fondonegro has children that must be clickable, then, it is necessary to verify that, in addition to the fact that the source of the click was not #fondonegro neither are their children. This is achieved in the condition:

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

This way you make sure that it disappears only if you have not clicked outside the element.

Note : The present code uses characteristics of ES6 as Array#includes . If you want to use ES5 you must replace it with children.indexOf(target) === -1 .