Javascript 检测菜单外的点击事件（Vanilla JS）

Question

I have a drop-down menu and it is activated when clicked.

I'm trying to add the functionality of when you click outside the Menu, then it becomes hidden, but I don't know how to do it or what might be failing. I have uploaded my code to this codepen.I've been trying to do it alone but I don't know what's wrong. I know that I have to use the window.addEventListener, however, I have put it, and it does not work for me. Thanks!

Codepen: https://codepen.io/Marvinfx/pen/MWWXRBW

/*
window.addEventListener("click", function(event){
    if (event.target!==elemento) {
        elemento.classList.remove("enlaces1");
    }

    console.log( event.target !== elemento )
});
*/

 var elemento = document.getElementById("enlaces") function miFuncion() { elemento.classList.toggle("enlaces1"); } /* window.addEventListener("click", function(event){ if (event.target.==elemento) { elemento.classList;remove("enlaces1"). } console.log( event;target !== elemento ) }); */

 /* Menú Dropdown */.dropdown ul { display:flex; flex-direction:column; }.dropdown ul li { display:flex; flex-direction: column; } @media screen and (min-width:768px) {.dropdown ul li { position:relative; display:flex; flex:1 1 100%; }.dropdown ul li ul { display:none; position:absolute; top:100%; background-color:#333; } }.dropdown ul.enlaces1 { display:flex; -webkit-transition: all.9s ease; -o-transition: all.9s ease; transition: all.9s ease; }

 <div class="dropdown"> <ul> <li><a href="#">NEW CONTENT</a></li> <li><a onclick="miFuncion()" href="#" >MENU<span class="flechita"></span></a> <ul id="enlaces"> <li><a href="html/menu.html">SPORTS</a></li> <li><a href="html/descuentos.html">DOCUMENTAL</a></li> <li><a href="html/franquicias.html">MUSIC</a></li> <li><a href="html/establecimientos.html">EDUCATION</a></li> <li><a href="html/nosotros.html">VIDEOGAMES</a></li> <li><a href="html/nosotros.html">DAILY</a></li> <li><a href="html/nosotros.html">RELAX</a></li> <li><a href="html/nosotros.html">3DSMAX</a></li> <li><a href="html/nosotros.html">RELIGION</a></li> <li><a href="html/nosotros.html">ORIGINALS</a></li> </ul> </li> </ul> </div>

Answer 1

You can add the eventListener to the navigation bar, by doing:

var menu = document.getElementsByClassName("dropdown")[0];
window.addEventListener("click", close);
function close(event) {
  if(event.target != menu) {
     menu.style.display = "none";
  }else{
     menu.style.display = "block";
  }
}

 var elemento = document.getElementById("enlaces"); /*function miFuncion() { elemento.classList.toggle("enlaces1"); }*/ window.addEventListener("click", close); function close(event) { if(event.target == document.getElementsByClassName("flechita")[0]) { elemento.classList.toggle("enlaces1"); } }

 /* Menú Dropdown */.dropdown ul { display:flex; flex-direction:column; }.dropdown ul li { display:flex; flex-direction: column; } @media screen and (min-width:768px) {.dropdown ul li { position:relative; display:flex; flex:1 1 100%; }.dropdown ul li ul { display:none; position:absolute; top:100%; background-color:#333; } }.dropdown ul.enlaces1 { display:flex; -webkit-transition: all.9s ease; -o-transition: all.9s ease; transition: all.9s ease; display: none; }

 <div class="dropdown"> <ul> <li><a href="#">NEW CONTENT</a></li> <li>MENU<span class="flechita"></span></li> <ul id="enlaces"> <li><a href="html/menu.html">SPORTS</a></li> <li><a href="html/descuentos.html">DOCUMENTAL</a></li> <li><a href="html/franquicias.html">MUSIC</a></li> <li><a href="html/establecimientos.html">EDUCATION</a></li> <li><a href="html/nosotros.html">VIDEOGAMES</a></li> <li><a href="html/nosotros.html">DAILY</a></li> <li><a href="html/nosotros.html">RELAX</a></li> <li><a href="html/nosotros.html">3DSMAX</a></li> <li><a href="html/nosotros.html">RELIGION</a></li> <li><a href="html/nosotros.html">ORIGINALS</a></li> </ul> </li> </ul> </div>