Javascript在Menu（Vanilla JS）之外检测点击事件

Question

我有一个下拉菜单，单击后将被激活。

我正在尝试添加以下功能，当您在菜单外单击时，该功能将变为隐藏状态，但是我不知道该怎么做，否则可能会失败。我已经将我的代码上传到该Codepen中。我一直在尝试独自完成它，但我不知道出了什么问题。我知道我必须使用window.addEventListener，但是，我已经放了它，它对我不起作用。谢谢！

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

您可以通过执行以下操作将eventListener添加到导航栏中：

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>