主页 / 问题 / 1481444
Accepted
npinex
Asked:2022-12-26 22:36:40 +0000 UTC2022-12-26 22:36:40 +0000 UTC

排除特定元素上的 mouseleave 事件

  • 772

如何使 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>

javascript

1 个回答

  1. Best Answer

    你可以这样实现它：

    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>

    • 1

相关问题