javascript - windows.onclick 一直自动点击

Question

const toggle = document.getElementById('toggle');
window.onclick = function (event) {
  if (event.target == toggle) {
     toggle.checked = false;
  }
};

.navbar {
  background-color: #5f686d;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  width: 100vw;
  z-index: 2;
  top: 0;
}


.navbar .desktop {
  list-style-type: none;
  padding: 0;
  display: flex;
  margin-left: auto;
  margin-top: 10px;
  margin-right: 1rem;
  margin-bottom: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-transform: capitalize;
}
#logo {
  width: 150px;
  height: 50px;
  margin-top: 15px;
  margin-right: 30vw;
  margin-left: 2vw;
}
.navbar li img{
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  padding: 0px;

}

/* Dropdown Button */
.dropbtn {
  background-color: #5f686d;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  border: 1px solid #95bbdf;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

.navbar ul li i{
  font-size: 2rem;
  margin-right: 2rem;
}
.navbar ul li div{
  padding: 0px !important;
}
.navbar .fa-sort-down{
  font-size: 1.5rem;
  color: whitesmoke;
}
.navbar ul li ,
.navbar ul li div{
  padding: 10px;
  color: whitesmoke;
  margin: auto;
  cursor: pointer;
  
}
.navbar ul li div:hover{
  border: none;
  text-decoration: none;
}
.navbar ul li a {
  text-decoration: none;
  color: white;
  border-bottom: 2px solid transparent;
}

.navbar ul li a:hover {
  color: #ea4c88;
  transition: 200ms ease;
}

.navbar label {
  font-size: 40px;
  color: whitesmoke;
  line-height: 70px;
  display: flex;
  flex-direction: row;
  display: none;
  justify-content: flex-end;
}
.navbar #toggle {
  display: none;
}

ol {
  display: none !important;
  background-color: rgb(255, 255, 255);
  border: 1px solid black;
  border-top: none;
}
ol a{
  color: black;
}
ol li:hover a{
  color: white;
}
ol li:hover{
  background-color: rgb(107, 103, 103);
}
/*navbar media*/

@media screen and (max-width: 1031px) {
  .navbar {
    align-items: center;
    justify-content: center;
  }
  .navbar ul {
    margin-right: auto;
    margin-left: auto;
    justify-content: space-between;
  }
  #logo {
    margin: auto;
    padding-left: 1.5rem;
  }
  .prof_name{
    display: none;
  }

}
@media screen and (max-width: 630px) {
  .navbar {
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
  }
  .navbar {
    align-items: flex-start;
    justify-content: flex-start;
  }

  #logo {
    margin: 0.5rem;
  }
  .navbar .desktop{
    display: none !important;
  }
  .navbar ol {
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
  }
  .navbar ol li {
    display: flex;
    justify-content: center;
    font-size: 1.3em;
    margin: 0;
  }
  .navbar label {
    align-self: flex-end;
    margin-right: 10px;
    display: flex;
    cursor: pointer;
    color: white;
    width: 40px;
    position: fixed;
  }

  #toggle[type=checkbox]:checked ~ ol {
    display: block !important;
  }
  .prof_name{
    display: none;
  }
}

    <nav class="navbar">
            <a href="#"><img id="logo"src="../assets/images/logo.png" alt="logo"></a>
            <label for="toggle"> &#9776; </label>
            <input type="checkbox" id="toggle">
            <ul class="desktop">
              <li> <a href="accounts.html"> <i class="fas fa-home" title="Home"></i></a></li>
              <li onclick="toggleDropdown()">
                <img src="../assets/images/avatar-1577909__340.png" alt="img_you">
            </li>
            <div class="dropdown">
                    <button class="dropbtn">Ayo Alesh |ADMIN. <i class="fas fa-sort-down"></i></button>
                    <div class="dropdown-content">
                            <a href="#" onclick="toggleCreateAccoutn('create_account_modal_')">Create User</a>
                            <a href="../index.html"> Log out</a>
                            <a href="../USER/profile.html">User</a>
                            <a href="../STAFF/accounts.html">Staff</a>
                    </div>
            </div>
            </ul>
            <ol>                                                                                                   
                    <li>
                        <a href="accounts.html">Home</a>
                    </li>
                    <li><a href="#" onclick="toggleCreateAccoutn('create_account_modal_')">Create User</a></li>
                   <li> <a href="../index.html"> Log out</a></li>
                    <li><a href="../USER/profile.html">User</a></li>
                    <li> <a href="../STAFF/accounts.html">Staff</a></li>
                </ol>
          </nav

我正在使用复选框在移动 View 中显示和隐藏汉堡包导航栏。我试图确保当用户在导航栏打开时点击屏幕上的任何地方时，复选框应该被选中并且导航栏应该隐藏。但是导航栏甚至不会打开，我发现 windows.onclick 立即触发我尝试打开导航栏。

Answer 1

尝试文档而不是窗口。没有任何代码可以隐藏 .navbar 并且使用 event.target 看起来并不需要。 event.target 引用用户点击的元素，在这种情况下可以认为是任何元素。

document.onclick = function(event) {
  const tog = document.getElementById('toggle');
  const nav = document.querySelector('.navbar');
  tog.checked = true;
  nav.style.display = 'none';
};

.navbar {
  background-color: #5f686d;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  width: 100vw;
  z-index: 2;
  top: 0;
}

.navbar .desktop {
  list-style-type: none;
  padding: 0;
  display: flex;
  margin-left: auto;
  margin-top: 10px;
  margin-right: 1rem;
  margin-bottom: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-transform: capitalize;
}

#logo {
  width: 150px;
  height: 50px;
  margin-top: 15px;
  margin-right: 30vw;
  margin-left: 2vw;
}

.navbar li img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  padding: 0px;
}


/* Dropdown Button */

.dropbtn {
  background-color: #5f686d;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  border: 1px solid #95bbdf;
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}

.navbar ul li i {
  font-size: 2rem;
  margin-right: 2rem;
}

.navbar ul li div {
  padding: 0px !important;
}

.navbar .fa-sort-down {
  font-size: 1.5rem;
  color: whitesmoke;
}

.navbar ul li,
.navbar ul li div {
  padding: 10px;
  color: whitesmoke;
  margin: auto;
  cursor: pointer;
}

.navbar ul li div:hover {
  border: none;
  text-decoration: none;
}

.navbar ul li a {
  text-decoration: none;
  color: white;
  border-bottom: 2px solid transparent;
}

.navbar ul li a:hover {
  color: #ea4c88;
  transition: 200ms ease;
}

.navbar label {
  font-size: 40px;
  color: whitesmoke;
  line-height: 70px;
  display: flex;
  flex-direction: row;
  display: none;
  justify-content: flex-end;
}

.navbar #toggle {
  display: none;
}

ol {
  display: none !important;
  background-color: rgb(255, 255, 255);
  border: 1px solid black;
  border-top: none;
}

ol a {
  color: black;
}

ol li:hover a {
  color: white;
}

ol li:hover {
  background-color: rgb(107, 103, 103);
}


/*navbar media*/

@media screen and (max-width: 1031px) {
  .navbar {
    align-items: center;
    justify-content: center;
  }
  .navbar ul {
    margin-right: auto;
    margin-left: auto;
    justify-content: space-between;
  }
  #logo {
    margin: auto;
    padding-left: 1.5rem;
  }
  .prof_name {
    display: none;
  }
}

@media screen and (max-width: 630px) {
  .navbar {
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
  }
  .navbar {
    align-items: flex-start;
    justify-content: flex-start;
  }
  #logo {
    margin: 0.5rem;
  }
  .navbar .desktop {
    display: none !important;
  }
  .navbar ol {
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
  }
  .navbar ol li {
    display: flex;
    justify-content: center;
    font-size: 1.3em;
    margin: 0;
  }
  .navbar label {
    align-self: flex-end;
    margin-right: 10px;
    display: flex;
    cursor: pointer;
    color: white;
    width: 40px;
    position: fixed;
  }
  #toggle[type=checkbox]:checked~ol {
    display: block !important;
  }
  .prof_name {
    display: none;
  }
}

<nav class="navbar">
  <a href="#"><img id="logo" src="../assets/images/logo.png" alt="logo"></a>
  <label for="toggle"> &#9776; </label>
  <input type="checkbox" id="toggle">
  <ul class="desktop">
    <li>
      <a href="accounts.html"> <i class="fas fa-home" title="Home"></i></a>
    </li>
    <li onclick="toggleDropdown()">
      <img src="../assets/images/avatar-1577909__340.png" alt="img_you">
    </li>
    <div class="dropdown">
      <button class="dropbtn">Ayo Alesh |ADMIN. <i class="fas fa-sort-down"></i></button>
      <div class="dropdown-content">
        <a href="#" onclick="toggleCreateAccoutn('create_account_modal_')">Create User</a>
        <a href="../index.html"> Log out</a>
        <a href="../USER/profile.html">User</a>
        <a href="../STAFF/accounts.html">Staff</a>
      </div>
    </div>
  </ul>
  <ol>
    <li>
      <a href="accounts.html">Home</a>
    </li>
    <li><a href="#" onclick="toggleCreateAccoutn('create_account_modal_')">Create User</a></li>
    <li> <a href="../index.html"> Log out</a></li>
    <li><a href="../USER/profile.html">User</a></li>
    <li> <a href="../STAFF/accounts.html">Staff</a></li>
  </ol>
</nav>