Исключить событие mouseleave для определенного элемента

Question

Как сделать так чтобы mouseleave не распространялся на элемент .menu?

let link = document.querySelector('.link');
let dropMenu = document.querySelector('.drop-menu');

link.addEventListener("mouseenter", function () {
  setTimeout(() => {
    dropMenu.classList.remove('dn');
  }, 500);
});

link.addEventListener("mouseleave", function () {
  dropMenu.classList.add('dn');
});

.wrapper {
  position: relative;
}

.drop-menu {
  position: absolute;
  width: 100%;
  max-width: 400px;
  background: blue;
  top: 60px;
}

.dn {
  display: none;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  border: 1px solid #000;
  max-width: 500px;
}

.menu a {
  padding: 10px
}

<div class="container">
  <div class="wrapper">
    <a href="/" class="link">Каталог</a>
      <div class="drop-menu dn">
             <ul>
             <li>Элемент 1</li>
             <li>Элемент 2</li>
             <li>Элемент 3</li>
           </ul>
      </div>
  </div>
   <div class="menu">
       <a href="/">О компании</a>
       <a href="/">Доставка</a>
       <a href="/">Контакты</a>
   </div>
</div>

Answer 1

Можно вот так это реализовать:

let link = document.querySelector('#w-link');
let dropMenu = document.querySelector('.drop-menu');

link.addEventListener("mouseenter", function() {
  setTimeout(() => {
    dropMenu.classList.remove('dn');
  }, 500);
});

link.addEventListener("mouseleave", function() {
  dropMenu.classList.add('dn');
});

// Отменяем переход по ссылке "Каталог"
document.querySelector('#a-link')
  .addEventListener('click', e => {
    e.preventDefault();
  });

.wrapper {
  position: absolute;
  top: 5px;
}

.drop-menu {
  margin-top: 50px;
  width: 100%;
  max-width: 400px;
  background: blue;
  padding: 5px 15px 5px 0;
  color: white;
}

.dn {
  display: none;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  border: 1px solid #000;
  max-width: 500px;
  margin-top: 30px;
}

.menu a {
  padding: 10px
}

<div class="container">
  <div class="wrapper" id="w-link">
    <a href="/" class="link" id="a-link">Каталог</a>
    <div class="drop-menu dn">
      <ul>
        <li>Элемент 1</li>
        <li>Элемент 2</li>
        <li>Элемент 3</li>
      </ul>
    </div>
  </div>
  <div class="menu">
    <a href="/">О компании</a>
    <a href="/">Доставка</a>
    <a href="/">Контакты</a>
  </div>
</div>

Открытие по клику:

let link = document.querySelector('#w-link');
let dropMenu = document.querySelector('#drop-menu');

document.querySelector('#a-link')
  .addEventListener('click', e => {
    e.preventDefault();
    if (dropMenu.classList.contains('dn')) {
      setTimeout(() => {
        dropMenu.classList.remove('dn');
      }, 300);
    } else {
      dropMenu.classList.add('dn');
    }
  });

.wrapper {
  position: absolute;
  top: 5px;
}

.drop-menu {
  display: inline-block;
  max-width: 400px;
  background: blue;
  padding: 5px 20px 5px 0;
  color: white;
  margin-top: 3px;
}

.dn {
  display: none;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  border: 1px solid #000;
  max-width: 500px;
  margin-top: 30px;
}

.menu a {
  padding: 10px
}

<div class="container">
  <div class="wrapper" id="w-link">
    <a href="/" class="link" id="a-link">Каталог</a>

  </div>
  <div class="menu">
    <a href="/">О компании</a>
    <a href="/">Доставка</a>
    <a href="/">Контакты</a>
  </div>
  <div class="drop-menu dn" id="drop-menu">
    <ul>
      <li>Элемент 1</li>
      <li>Элемент 2</li>
      <li>Элемент 3</li>
    </ul>
  </div>
</div>

БЛОГ НА HUSL

Исключить событие mouseleave для определенного элемента

Ответы (1 шт):