javascript - 如何在具有子 DIV 的 DIV 上使用 Javascript onmouseout

Question

我正在开发一个用于学习目的的网站。我在右上角创建了一个菜单按钮，如下面的屏幕截图所示。

下面的屏幕截图显示了触发菜单按钮时页面的外观。

您可以看到展开的菜单面板中有 3 个部分。我正在尝试使用 javascript onmouseout 在将鼠标移到 DIV 之外时自动隐藏菜单。但是一旦鼠标指针到达中间的灰色 div，菜单就会隐藏。虽然这个灰色 div 是菜单面板的子级，但菜单一旦到达这个灰色 div 就会隐藏起来。如何克服这个问题？

<div class="menupanel">
          <div class="menulist">
            <img class="menu-logo" src="assets/img/logo-g.svg" alt="">
            <ul>
              <li><a class="menulist-link" href="#">Home</a></li>
              <li><a class="menulist-link" href="#">About Us</a></li>
              <li><a class="menulist-link" href="#">Services</a></li>
            </ul>
          </div>
          <div class="contact">
            <div class="cont-container">
              <h2>Address</h2>
              <p>No. 39, LIG3, Surya City, Bangalore - 560008</p>
              <hr>
              <p><ion-icon class="cont-icons" name="call-outline"></ion-icon><a href="tel:[phone]">+91 9X9X9X9X9X</a></p>
              <p><ion-icon class="cont-icons" name="mail-outline"></ion-icon><a href="mailto:[e-mail]">[e-mail]</a></p>
              <hr>
            </div>
          </div>
          <div class="menuhover">
            <img class="menu-img" src="assets/img/home.jpg" alt="">
            <img class="menu-img" src="assets/img/about.jpg" alt="">
            <img class="menu-img" src="assets/img/service.jpg" alt="">
          </div>

标签： javascriptonmouseout

Answer 1

您需要mouseleave代替mouseout：

mouseleave并且mouseout相似但不同之处在于mouseleave不会冒泡，而mouseout会。这意味着mouseleave当指针退出元素及其所有后代mouseout时触发，而当指针离开元素或离开元素的后代之一时触发（即使指针仍在元素内）。

演示：

const parent = document.querySelector('#div-soup')

parent.addEventListener('mouseout', () =>
  console.log('mouseout'))

parent.addEventListener('mouseleave', () =>
  console.log(' mouseleave '))

#div-soup{width:45%}div{margin:5px;padding:5px;background:rgba(0,0,0,.1)}.as-console-wrapper{width:50%;max-height:100%;position:fixed;overflow:hidden!important;padding:0;margin:0;right:0;left:50%!important;bottom:0!important;max-height:100%!important}

<div id="div-soup"><div><div><div><div><div><div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div></div></div></div></div>