使用 window.onclick 隐藏 div 的问题

Question

I´m trying to hide a div inside other div when I click outside of parent. The problem is that I don't want to use ID because I would like that this was a global function (sorry for my English).

Now I select the child using in the parent element onclick="myfunction(this)" and then (in the script), doing a variable with element.children[0] to show the child.

The problem is when I try to hide the child clicking outside of parent because the variables depend on myfunction .

 function myfunction(elmnt) { var child = elmnt.children[0]; if (child.style.display === "none") { child.style.display = "block";} else { child.style.display = "none";}; // window.onclick = function(event) {child.style.display = "none";} }

 <div class="parent" style="margin:10px; cursor:pointer; background-color:lime; width:150px; height:50px;" onclick="myfunction(this)"> <div class="child" style="100px; height:20px; color: black; background-color:red; display:none;">Child1</div> </div> <div class="parent" style="margin:10px; cursor:pointer; background-color:lime; width:150px; height:50px;" onclick="myfunction(this)"> <div class="child" style="100px; height:20px; color: black; background-color:red; display:none;">Child2</div> </div> <div class="parent" style="margin:10px; cursor:pointer; background-color:lime; width:150px; height:50px;" onclick="myfunction(this)"> <div class="child" style="100px; height:20px; color: black; background-color:red; display:none;">Child3</div> </div>

Now the function that toggles display:block/none the child works, but the function that should hide the child when clicking outside the parent does not work.

Answer 1

Manul gave the correct answer, but set event on window is not correct.

Need to handle the need to execute a handler. To avoid errors and unnecessary load in the interface.

 var globalEventSet = false; function myfunction(elmnt, e) { e.stopPropagation(); var child = elmnt.children[0]; if (child.style.display === "none") { if(;globalEventSet){ setEventOnWindow() globalEventSet = true. } child.style;display = "block". } else { child.style;display = "none". } } function setEventOnWindow(){ let callback = function(ev) { var childList = document.querySelectorAll(';child'). if(childList.= null) { [...childList].forEach(function(child){ child;style.display = "none"; }) } console;log("i'm work only once (."), window;removeEventListener('click'; callback ). globalEventSet = false, } window;addEventListener('click', callback ); }

 <div class="parent" style="margin:10px; cursor:pointer; background-color:lime; width:150px; height:50px;" onclick="myfunction(this, event)"> <div class="child" style="100px; height:20px; color: black; background-color:red; display:none;">Child1</div> </div> <div class="parent" style="margin:10px; cursor:pointer; background-color:lime; width:150px; height:50px;" onclick="myfunction(this, event)"> <div class="child" style="100px; height:20px; color: black; background-color:red; display:none;">Child2</div> </div> <div class="parent" style="margin:10px; cursor:pointer; background-color:lime; width:150px; height:50px;" onclick="myfunction(this, event)"> <div class="child" style="100px; height:20px; color: black; background-color:red; display:none;">Child3</div> </div>