Javascript Detect click event outside of Menu(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>