Блог

Главная - Вопросы по программированию - Javascript: обработчики событий «Mouseover» и «mouseout» работают, но «mouseout» не работает должным образом, когда «mouseover» заменяется на «click»

Javascript: обработчики событий «Mouseover» и «mouseout» работают, но «mouseout» не работает должным образом, когда «mouseover» заменяется на «click»

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я создаю выпадающее меню на веб-странице, используя JavaScript (не jQuery).
Мои исследования показали только похожие проблемы с изображениями и цветами, но решения этих проблем не исправляют мое выпадающее меню.

Когда «mouseover» используется для открытия моего выпадающего меню в обработчике событий, обработчик событий «mouseout» позволяет мне прокручивать мои ссылки в списке до того, как выпадающее меню будет закрыто при возникновении события «mouseout». Когда «mouseover» заменяется на «click» в обработчике событий, «mouseout» срабатывает, поскольку он оставляет текстовое содержимое выпадающей кнопки, что не позволяет мне перемещать курсор к элементам в выпадающем меню.

Ссылки отображаются в виде элементов встроенного блока слева от верхней части экрана. Они исправлены и не переполняются при изменении размера экрана. В выпадающем меню есть dropBtn, который виден, в то время как остальные элементы выпадающего списка отображаются: нет; с использованием CSS. JavaScript нацелен на элементы списка, которые отображаются: нет; когда dropBtn запускает событие. Затем элементы списка отображаются: list-item; . Когда курсор покидает навигацию, он должен выдавать элементы списка display: none; снова, но display: none; происходит слишком рано, когда событие «click» сопряжено с событием «mouseout».

Есть ли у кого-нибудь способ написать это, чтобы я мог щелкнуть dropBtn, чтобы открыть выпадающее меню, позволяя мне перемещать курсор по ссылкам перед закрытием выпадающего меню с помощью события mouseout?

 let dropMenu = document.querySelector("#dropMenu");
let navList = document.querySelectorAll("#dropMenu li");
let navDrop = document.querySelector("#navDrop");
let listContainer = document.querySelector("#listContainer");
let navItemNumber = navList.length;


function toggleNavOpen() {


  for (let i = 1; i < navItemNumber; i  ) {
    navList[i].style.display = "list-item";
  }
  for (let i = 1; i < navItemNumber; i  ) {
    navList[i].style.width = "110px";
  }
}


dropMenu.addEventListener("mouseover", toggleNavOpen);
//replace mouseover with click in the previous line, and the 
//code doesn't work properly.


function toggleNavClose() {

  for (let i = 1; i < navItemNumber; i  ) {

    navList[i].style.display = "none";

  }
}

dropMenu.addEventListener("mouseout", toggleNavClose);  
 .content {
  clear: both;
}

#logo {
  float: left;
  margin: 20px 20px 5px 20px;
  padding: 31px 37px;
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
}

.row {
  float: left;
  overflow: unset;
  white-space: nowrap;
  background-color: #d8e9ee;
  width: 100%;
}

.top {
  position: fixed;
}

.menu {
  display: inline-block;
  list-style-type: none;
  margin: 25px 8px 0px 8px;
  padding: 12px 14px;
  border-style: groove;
  border-width: 2px;
  box-shadow: 2px 2px 2px;
  font-size: 1.4em;
  color: rgb(11, 12, 36);
  background-color: #f5f5ed;
  border-radius: 1em;
}

.menu:hover {
  margin: 24px 8px 0px 6px;
  border-style: ridge;
  box-shadow: 3px 3px 3px;
  font-size: 1.45em;
  border-radius: .9em;
  /*transition-duration: 250ms;*/
}

#navDrop {
  position: fixed;
  display: inline-block;
}

#dropMenu {
  font-size: 1.4em;
  border-style: groove;
  border-width: 2px;
  box-shadow: 2px 2px 2px;
  color: rgb(11, 12, 36);
  background-color: #f5f5ed;
  border-radius: 1em;
  margin: 25px 8px 0 8px;
}

#dropMenu:hover {
  font-size: 1.45em;
  border-style: ridge;
  box-shadow: 3px 3px 3px;
  margin: 24px 8px 0px 7px;
  border-radius: .9em;
}

.dropBtn {
  padding: 12px 14px;
}

.dropItem {
  display: none;
  padding: 12px 14px;
}

nav ul li a {
  text-decoration: none;
}  
 <ul>
  <li class="menu"><a href="index.html">Home</a></li>
  <li class="menu"><a href="content/tuning.html#tuning">Tuning</a></li>
  <li class="menu"><a href="content/videos.html">Lessons</a></li>
  <li class="menu"><a href="content/tools.html">Tools</a></li>
  <li class="menu"><a href="content/signup.html">Sign Up</a></li>
  <li class="menu"><a href="content/signin.html">Sign in</a></li>
  <li id="navDrop">
    <ul id="dropMenu">
      <li class="dropBtn"><a href="#">More</a></li>
      <li class="dropItem"><a href="content/tuning.html#repairs">Repairs</a></li>
      <li class="dropItem"><a href="content/supplies.html">Supplies</a></li>
      <li class="dropItem"><a href="content/pricing.html">Pricing</a></li>
      <li class="dropItem"><a href="content/services.html">Services</a></li>
      <li class="dropItem"><a href="content/about.html">About</a></li>
      <li class="dropItem"><a href="content/contact.html">Contact</a></li>
    </ul>
  </li>
</ul>

Комментарии:

1. Я сделал вам фрагмент. Пожалуйста, добавьте к нему соответствующий CSS

2. Во фрагменте нет события щелчка для выпадающего списка. Это отличается от моей проблемы.

3. Фрагмент — это ВАШ КОД!!! в формате фрагмента

4. Я сделал комментарий в своем коде. он сказал заменить наведение курсора мыши на щелчок, и он перестает работать. Итак, код, который вы создали в виде фрагмента, действительно работает. Это происходит, когда вы меняете код, чтобы иметь событие щелчка, при котором код завершается с ошибкой. Кроме того, я добавил css, но это в основном не имеет отношения к проблеме, но, возможно, это даст вам лучшее представление о том, как выглядит страница.

5. CSS, конечно, очень важен. В следующий раз, пожалуйста, нажмите «Редактировать», прокрутите вниз и нажмите «редактировать фрагмент выше» и перейдите к css на панели css, как я только что сделал для вас. Раньше было неясно, что запускать и как.

Ответ №1:

Как насчет этого — обратите внимание, что я добавил класс с именем open

 let dropMenu = document.querySelector("#dropMenu");
let navList = document.querySelectorAll("#dropMenu li");
let navDrop = document.querySelector("#navDrop");
let listContainer = document.querySelector("#listContainer");
let navItemNumber = navList.length;


function toggleNav(e) { // called on click AND mouseleave
  const tgt = e.target; // clicked or mouseleave'd object
  const li = document.querySelector(".dropBtn"); 
  if (tgt.id amp;amp; tgt.id === "dropMenu" amp;amp; e.type === "mouseleave") {
    li.classList.add("open"); // pretend the li class is open
  }
  const open = li.classList.contains("open"); // is it open?
  [...navList].forEach(nav => nav.classList.toggle("open", !open)); // toggle the class

  if (tgt.tagName === "A" amp;amp; tgt.closest("li").classList.contains("dropBtn")) {
    li.classList.toggle("open"); // toggle if clicked
  }
}
dropMenu.addEventListener("click", toggleNav);
dropMenu.addEventListener("mouseleave", toggleNav);  
 .content {
  clear: both;
}

#logo {
  float: left;
  margin: 20px 20px 5px 20px;
  padding: 31px 37px;
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
}

.row {
  float: left;
  overflow: unset;
  white-space: nowrap;
  background-color: #d8e9ee;
  width: 100%;
}

.top {
  position: fixed;
}

.menu {
  display: inline-block;
  list-style-type: none;
  margin: 25px 8px 0px 8px;
  padding: 12px 14px;
  border-style: groove;
  border-width: 2px;
  box-shadow: 2px 2px 2px;
  font-size: 1.4em;
  color: rgb(11, 12, 36);
  background-color: #f5f5ed;
  border-radius: 1em;
}

.menu:hover {
  margin: 24px 8px 0px 6px;
  border-style: ridge;
  box-shadow: 3px 3px 3px;
  font-size: 1.45em;
  border-radius: .9em;
  /*transition-duration: 250ms;*/
}

#navDrop {
  position: fixed;
  display: inline-block;
}

#dropMenu {
  font-size: 1.4em;
  border-style: groove;
  border-width: 2px;
  box-shadow: 2px 2px 2px;
  color: rgb(11, 12, 36);
  background-color: #f5f5ed;
  border-radius: 1em;
  margin: 25px 8px 0 8px;
}

#dropMenu:hover {
  font-size: 1.45em;
  border-style: ridge;
  box-shadow: 3px 3px 3px;
  margin: 24px 8px 0px 7px;
  border-radius: .9em;
}

.dropBtn {
  padding: 12px 14px;
}

.dropItem {
  display: none;
  padding: 12px 14px;
}

nav ul li a {
  text-decoration: none;
}

.open {
  display: list-item;
  width: 110px;
}  
 <ul>
  <li class="menu"><a href="index.html">Home</a></li>
  <li class="menu"><a href="content/tuning.html#tuning">Tuning</a></li>
  <li class="menu"><a href="content/videos.html">Lessons</a></li>
  <li class="menu"><a href="content/tools.html">Tools</a></li>
  <li class="menu"><a href="content/signup.html">Sign Up</a></li>
  <li class="menu"><a href="content/signin.html">Sign in</a></li>
  <li id="navDrop">
    <ul id="dropMenu">
      <li class="dropBtn"><a href="#">More</a></li>
      <li class="dropItem"><a href="content/tuning.html#repairs">Repairs</a></li>
      <li class="dropItem"><a href="content/supplies.html">Supplies</a></li>
      <li class="dropItem"><a href="content/pricing.html">Pricing</a></li>
      <li class="dropItem"><a href="content/services.html">Services</a></li>
      <li class="dropItem"><a href="content/about.html">About</a></li>
      <li class="dropItem"><a href="content/contact.html">Contact</a></li>
    </ul>
  </li>
</ul>

Комментарии:

1. Это работает при нажатии, но затем оно закрывается только при нажатии. Я хочу, чтобы он открывался щелчком мыши и закрывался при наведении курсора мыши. Спасибо за фрагменты, они полезны.

2. Кроме того, по какой-то причине этот код, который вы написали, не работает в Chrome для меня.

3. См. Обновление. Я тестирую тип события — я написал код в Chrome

4. Я просто переключил mouseout на mouseleave в своем коде, и это сработало. Ваш пример показал путь. Мне нравится, как вы написали свой код. Спасибо!

5. Странная вещь в том, что ваш код не работает в VS code для меня, и все еще не работает в Chrome. Я понятия не имею, почему, но mouseleave сделал эту работу за меня.