Как исправить click eventlistener при обновлении, для работы требуется двойной щелчок

ProgramBox

Как исправить click eventlistener при обновлении, для работы требуется двойной щелчок

Post author:admin
Запись опубликована:24 февраля, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

Я работаю над проектом navbar, используя только html css и ванильный javascript. Все работает нормально, и он делает то, что мне нужно. Проблема в том, что при первой загрузке или обновлении страницы при нажатии на пункт меню «Загрузки» она не будет работать одним щелчком мыши. Для того, чтобы он работал, я должен дважды щелкнуть по кнопке. После двойного щелчка он будет работать одним щелчком мыши.

Я попытался исследовать проблему и попробовал такие строки, как preventDefault(), но ничего не работает, и мне трудно что-то найти. Все, с чем я сталкиваюсь, связано с jquery.

 const dropDownMain = document.querySelector('.dropdown');
 const dropdown = document.querySelector('.dropdown1');
 const dropdown2 = document.querySelector('.dropdown2');
 const submenu1 = document.querySelector('.submenu1');
 const dropdown3 = document.querySelector('.dropdown3');
 const submenu2 = document.querySelector('.submenu2');
 const list = document.querySelector('#listAdd');
 
 dropDownMain.addEventListener('click', function(){
   
   if(dropdown.style.display === 'none'){
     dropdown.style.display = 'block';
     dropDownMain.style.backgroundColor = 'black';
    
   }else{
     dropdown.style.display = 'none';
     dropDownMain.style.backgroundColor = '#444444';
     dropdown2.style.display = 'none';
     submenu1.style.backgroundColor = '#444444';
     dropdown3.style.display = 'none';
    submenu2.style.backgroundColor = '#444444';
 
     
   }
 });
 
 
// First Submenu
 submenu1.addEventListener('click', function(){
   if(dropdown2.style.display === 'none' ){
     dropdown2.style.display = 'block';
     dropdown3.style.display = 'none';
     submenu1.style.backgroundColor = 'black';
     submenu2.style.backgroundColor = '#444444';
   }else{
     dropdown2.style.display = 'none';
     submenu1.style.backgroundColor = '#444444';
   }
 });

// Second Submenu
 submenu2.addEventListener('click', function(){
   if(dropdown3.style.display === 'none'){
     dropdown3.style.display = 'block';
     submenu2.style.backgroundColor = 'black';
     dropdown2.style.display = 'none';
     submenu1.style.backgroundColor = '#444444';
   }else{
     dropdown3.style.display = 'none';
     submenu2.style.backgroundColor = '#444444';
     submenu1.style.backgroundColor = '#444444';
   }
 });
 
 document.getElementById('searchGlass').addEventListener('click', function(){
   addOnList = document.getElementById('form').value;
   console.log(addOnList);
   let listing = document.createElement('li');
   let anchor = document.createElement('a');
   let att = document.createAttribute('href');
   att.value = '#';
   anchor.setAttributeNode(att);
   listing.appendChild(anchor);
   anchor.appendChild(document.createTextNode(addOnList));
   list.appendChild(listing);
 });

 body,html{
  font-family: 'PT Sans', sans-serif;
  background-color: white;
  margin:0;
  color: white;
  line-height:1.6;
}

.container{
  width:1920px;
  margin: 0px;
}

#nav1{
  background-color:#444444;
  background-repeat:no-repeat;
  color:white;
  font-size:14px;
  overflow:hidden;
  height:50px;
  box-shadow: 0px 1px 10px #999;
}

#nav1 ul{
  padding:0;
}

#nav1 li{
  display:inline;
}

#nav1 a {
  text-decoration:none;
  color:white;
  padding:20px;
}

#nav1 li a:active{
  background-color:black;
}

#nav1 li a:hover{
  background-color:black;
}

.fas {
  vertical-align:middle;
}

/*First Menu*/

.dropdown1{
  background-color:#444444;
  width:200px;
  margin-top:0px;
  box-shadow: 0px 0px 10px #999;
  position:absolute;
  margin-left:204px;
  padding-bottom:15px;
  display:none;
}

.dropdown1:before, .dropdown1:after{
  content:'';
  position:absolute;
  display:block;
  bottom:100%;
  width:0;
  height:0;
}

.dropdown1:before{
  left:19px;
  border: 11px solid transparent;
  border-bottom-color:#444444;
}

.dropdown1:after{
  left:20px;
  border: 11px solid transparent;
  border-bottom-color: #444444;
}

.dropdown1 ul{
   padding:20px;
  list-style-type: none;
  
}

.dropdown1 li{
  padding-bottom:5px;
  
  border-bottom: 1px solid grey;
}

.dropdown1 a{
 
  text-decoration:none;
  color:white;
  font-size:12px;
}

.dropdown1 li a:active {
  background-color:black;
}
.dropdown1 li:hover {
  background-color:black !important;
}

.dropdown1 li:first-child {
   background:none !important;
}


.dropdown1 input{
  color:white;
  border:none;
  padding-top:5px;
  height:10px;
  margin-left:20px;
}

.dropdown1 li:nth-child(3) i{
  color:white;
  margin-left:108px;
}

.dropdown1 li:nth-child(5) i{
  color:white;
  margin-left:98px;
}

.inputBar{
  width:120px;
  background-color:#444444;
  border: 1px solid transparent;
  box-shadow:0px 0px 10px #999;
  padding:5px;
}

#searchGlass{
  margin-left:10px;
  padding:3px;
  text-align:center;
  vertical-align:middle;
  box-shadow:0px 0px 10px #999 ;
}

#searchGlass i{
  width:15px;
}


#listAdd{
  margin:0;
}


/*First Sub Menu*/

.dropdown2{
  background-color:#444444;
  width:200px;
  height:270px;
  box-shadow:0px 0px 10px #999;
  position:absolute;
  margin-left:380px;
  margin-top:98px;
  display:none;
}

.dropdown2 ul{
  padding:20px;
  list-style-type:none;
}

.dropdown2 li{
  padding-bottom:5px;
  border-bottom: 1px solid grey;
}

.dropdown2 a{
  color:white;
  font-size:12px;
  text-decoration:none;
}


.dropdown2 li:hover{
  background-color:black !important;
}

.dropdown2 li:first-child{
  background:none !important;
}

/*Second SubMenu*/

.dropdown3{
  background-color:#444444;
  width:200px;
  height:240px;
  box-shadow:0px 0px 10px #999;
  position:absolute;
  margin-left:380px;
  margin-top:160px;
  display:none;
  
}

.dropdown3 ul{
  padding:20px;
  list-style-type:none;
}

.dropdown3 li{
  padding-bottom:5px;
  border-bottom:1px solid grey;
}

.dropdown3 a{
  text-decoration:none;
  color:white;
  font-size:12px;
  padding:0;
}

.dropdown3 li:hover{
  background-color:black !important;
}

.dropdown3 li:first-child{
  background:none;
}

 <!DOCTYPE html>
<html>
<head>
<title>Drop Down Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


</head>

<body>
  <header class="container">
    <!--Start of Navbar-->
    <!--Main Navbar-->
    <nav id="nav1">
      <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Foundation</a></li>
        <li><a href="#" class="dropdown">Downloads <i class="fas fa-angle-down"></i></a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
    <!-- End of Main Navbar-->
    <!--Main Menu-->
    <div class="dropdown1">
      <ul id="listAdd">
        <li>Sample Menu</li>
        <li><a href="#">Television</a></li>
        <li class="submenu1"><a href="#" >Movies <i class="fas fa-angle-right"></i> </a></li>
        <li><a href="#">E-Books</a></li>
        <li class="submenu2"><a href="#" >Software <i class="fas fa-angle-right"></i></a></li>
        <li><a href="#">Images</a></li>
      </ul>
      <input placeholder="Input" class="inputBar" id="form"><a href="#" id="searchGlass"><i class="fas fa-search fa-xs"></i></a>
    </div>
    <!--End of Main Menu-->
    <!--First Sub Menu-->
    <div class="dropdown2">
      <ul>
        <li>Top Movies</li>
        <li><a href="#">Friday</a></li>
        <li><a href="#">Avengers</a></li>
        <li><a href="#">Transformers</a></li>
        <li><a href="#">Dark Knight</a></li>
        <li><a href="#">The Notebook </a></li>
      </ul>
    </div>
    <!--End of First Sub Menu-->
    <!--Second Sub Menu-->
    <div class="dropdown3">
      <ul>
        <li>Top Software</li>
        <li><a href="#">Adobe</a></li>
        <li><a href="#">Gimp</a></li>
        <li><a href="#">Microsoft Office</a></li>
        <li><a href="#">Rosetta Stone</a></li>
      </ul>
    </div>
    <!--End of Second Sub Menu-->
  </header>
  <!--End of Navbar-->

<script src="script.js"></script>
</body>

</html>

Ответ №1:

Вы тестируете style свойство своих элементов. Когда вы это делаете, вы тестируете любые «встроенные» стили (стили, которые были установлены с помощью style атрибута или с style помощью свойства). Если ваш исходный HTML-код не имеет каких-либо style атрибутов ни для одного из элементов, то ваши тесты завершатся неудачей и перейдите в else раздел ваших тестов, где style затем устанавливается. После этого первоначального сбоя значение style устанавливается, поэтому последующие тесты работают.

Вместо этого вы можете протестировать «вычисляемый стиль» (стиль после обработки всех CSS, независимо от того, где был установлен стиль (встроенный, внутренняя таблица стилей, внешняя таблица стилей).

 const dropDownMain = document.querySelector('.dropdown');
 const dropdown = document.querySelector('.dropdown1');
 const dropdown2 = document.querySelector('.dropdown2');
 const submenu1 = document.querySelector('.submenu1');
 const dropdown3 = document.querySelector('.dropdown3');
 const submenu2 = document.querySelector('.submenu2');
 const list = document.querySelector('#listAdd');
 
 dropDownMain.addEventListener('click', function(){

   // ***********************************************************
   // Get the computed display style
   let computedDisplay = getComputedStyle(dropdown).display;
   // ***********************************************************
   
   // Test for the computed style, not the inline style which hasn't been set yet.
   if(computedDisplay === 'none'){
     dropdown.style.display = 'block';
     dropDownMain.style.backgroundColor = 'black';
    
   }else{
     dropdown.style.display = 'none';
     dropDownMain.style.backgroundColor = '#444444';
     dropdown2.style.display = 'none';
     submenu1.style.backgroundColor = '#444444';
     dropdown3.style.display = 'none';
    submenu2.style.backgroundColor = '#444444';
 
     
   }
 });
 
 
// First Submenu
 submenu1.addEventListener('click', function(){
   if(dropdown2.style.display === 'none' ){
     dropdown2.style.display = 'block';
     dropdown3.style.display = 'none';
     submenu1.style.backgroundColor = 'black';
     submenu2.style.backgroundColor = '#444444';
   }else{
     dropdown2.style.display = 'none';
     submenu1.style.backgroundColor = '#444444';
   }
 });

// Second Submenu
 submenu2.addEventListener('click', function(){
   if(dropdown3.style.display === 'none'){
     dropdown3.style.display = 'block';
     submenu2.style.backgroundColor = 'black';
     dropdown2.style.display = 'none';
     submenu1.style.backgroundColor = '#444444';
   }else{
     dropdown3.style.display = 'none';
     submenu2.style.backgroundColor = '#444444';
     submenu1.style.backgroundColor = '#444444';
   }
 });
 
 document.getElementById('searchGlass').addEventListener('click', function(){
   addOnList = document.getElementById('form').value;
   console.log(addOnList);
   let listing = document.createElement('li');
   let anchor = document.createElement('a');
   let att = document.createAttribute('href');
   att.value = '#';
   anchor.setAttributeNode(att);
   listing.appendChild(anchor);
   anchor.appendChild(document.createTextNode(addOnList));
   list.appendChild(listing);
 });

 body,html{
  font-family: 'PT Sans', sans-serif;
  background-color: white;
  margin:0;
  color: white;
  line-height:1.6;
}

.container{
  width:1920px;
  margin: 0px;
}

#nav1{
  background-color:#444444;
  background-repeat:no-repeat;
  color:white;
  font-size:14px;
  overflow:hidden;
  height:50px;
  box-shadow: 0px 1px 10px #999;
}

#nav1 ul{
  padding:0;
}

#nav1 li{
  display:inline;
}

#nav1 a {
  text-decoration:none;
  color:white;
  padding:20px;
}

#nav1 li a:active{
  background-color:black;
}

#nav1 li a:hover{
  background-color:black;
}

.fas {
  vertical-align:middle;
}

/*First Menu*/

.dropdown1{
  background-color:#444444;
  width:200px;
  margin-top:0px;
  box-shadow: 0px 0px 10px #999;
  position:absolute;
  margin-left:204px;
  padding-bottom:15px;
  display:none;
}

.dropdown1:before, .dropdown1:after{
  content:'';
  position:absolute;
  display:block;
  bottom:100%;
  width:0;
  height:0;
}

.dropdown1:before{
  left:19px;
  border: 11px solid transparent;
  border-bottom-color:#444444;
}

.dropdown1:after{
  left:20px;
  border: 11px solid transparent;
  border-bottom-color: #444444;
}

.dropdown1 ul{
   padding:20px;
  list-style-type: none;
  
}

.dropdown1 li{
  padding-bottom:5px;
  
  border-bottom: 1px solid grey;
}

.dropdown1 a{
 
  text-decoration:none;
  color:white;
  font-size:12px;
}

.dropdown1 li a:active {
  background-color:black;
}
.dropdown1 li:hover {
  background-color:black !important;
}

.dropdown1 li:first-child {
   background:none !important;
}


.dropdown1 input{
  color:white;
  border:none;
  padding-top:5px;
  height:10px;
  margin-left:20px;
}

.dropdown1 li:nth-child(3) i{
  color:white;
  margin-left:108px;
}

.dropdown1 li:nth-child(5) i{
  color:white;
  margin-left:98px;
}

.inputBar{
  width:120px;
  background-color:#444444;
  border: 1px solid transparent;
  box-shadow:0px 0px 10px #999;
  padding:5px;
}

#searchGlass{
  margin-left:10px;
  padding:3px;
  text-align:center;
  vertical-align:middle;
  box-shadow:0px 0px 10px #999 ;
}

#searchGlass i{
  width:15px;
}


#listAdd{
  margin:0;
}


/*First Sub Menu*/

.dropdown2{
  background-color:#444444;
  width:200px;
  height:270px;
  box-shadow:0px 0px 10px #999;
  position:absolute;
  margin-left:380px;
  margin-top:98px;
  display:none;
}

.dropdown2 ul{
  padding:20px;
  list-style-type:none;
}

.dropdown2 li{
  padding-bottom:5px;
  border-bottom: 1px solid grey;
}

.dropdown2 a{
  color:white;
  font-size:12px;
  text-decoration:none;
}


.dropdown2 li:hover{
  background-color:black !important;
}

.dropdown2 li:first-child{
  background:none !important;
}

/*Second SubMenu*/

.dropdown3{
  background-color:#444444;
  width:200px;
  height:240px;
  box-shadow:0px 0px 10px #999;
  position:absolute;
  margin-left:380px;
  margin-top:160px;
  display:none;
  
}

.dropdown3 ul{
  padding:20px;
  list-style-type:none;
}

.dropdown3 li{
  padding-bottom:5px;
  border-bottom:1px solid grey;
}

.dropdown3 a{
  text-decoration:none;
  color:white;
  font-size:12px;
  padding:0;
}

.dropdown3 li:hover{
  background-color:black !important;
}

.dropdown3 li:first-child{
  background:none;
}

 <!DOCTYPE html>
<html>
<head>
<title>Drop Down Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


</head>

<body>
  <header class="container">
    <!--Start of Navbar-->
    <!--Main Navbar-->
    <nav id="nav1">
      <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Foundation</a></li>
        <li><a href="#" class="dropdown">Downloads <i class="fas fa-angle-down"></i></a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
    <!-- End of Main Navbar-->
    <!--Main Menu-->
    <div class="dropdown1">
      <ul id="listAdd">
        <li>Sample Menu</li>
        <li><a href="#">Television</a></li>
        <li class="submenu1"><a href="#" >Movies <i class="fas fa-angle-right"></i> </a></li>
        <li><a href="#">E-Books</a></li>
        <li class="submenu2"><a href="#" >Software <i class="fas fa-angle-right"></i></a></li>
        <li><a href="#">Images</a></li>
      </ul>
      <input placeholder="Input" class="inputBar" id="form"><a href="#" id="searchGlass"><i class="fas fa-search fa-xs"></i></a>
    </div>
    <!--End of Main Menu-->
    <!--First Sub Menu-->
    <div class="dropdown2">
      <ul>
        <li>Top Movies</li>
        <li><a href="#">Friday</a></li>
        <li><a href="#">Avengers</a></li>
        <li><a href="#">Transformers</a></li>
        <li><a href="#">Dark Knight</a></li>
        <li><a href="#">The Notebook </a></li>
      </ul>
    </div>
    <!--End of First Sub Menu-->
    <!--Second Sub Menu-->
    <div class="dropdown3">
      <ul>
        <li>Top Software</li>
        <li><a href="#">Adobe</a></li>
        <li><a href="#">Gimp</a></li>
        <li><a href="#">Microsoft Office</a></li>
        <li><a href="#">Rosetta Stone</a></li>
      </ul>
    </div>
    <!--End of Second Sub Menu-->
  </header>
  <!--End of Navbar-->

<script src="script.js"></script>
</body>

</html>

Ответ №2:

Внутри функции обратного вызова для прослушивателя событий щелчка, который вы подключили к dropDownMain, вы проверяете свойство display на ‘none’.

К сожалению, изначально это не none, оно просто пустое. Вы можете исправить это,:

 if(dropdown.style.display === 'none' || dropdown.style.display === '')

Ответ №3:

Итак, эта проблема заключается в том, что тег отображения напрямую не привязан к выпадающему списку 1. Вы можете заменить выпадающий код 1 в HTML на <div class="dropdown1" style="display: none;"> . Или добавьте в js что-нибудь, чтобы проверить, отображается ли значение none или ни одно из двух вышеперечисленных, как это будет при первом запуске.