有子DIV时如何在DIV上使用Javascript onmouseout

问题描述

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

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

您可以在展开的菜单面板中看到3个分区。我在将鼠标移到DIV之外时尝试使用javascript onmouseout自动隐藏菜单。但是，一旦鼠标指针到达中间的灰色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>

解决方法

您需要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,.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>

,

如果您的元素有子元素，则该子元素的每个事件都会传播到父元素的元素事件处理程序。 长话短说，您的父级div捕获子元素的mouseout事件，然后执行处理程序。 为了防止这种情况，您需要这样的东西：

document
  .getElementById('my-parent-div')
  .addEventListener('mouseout',function(event) {
    if (event.target === this) {
      // do some stuff
    }
  });

,

您可以将CSS声明pointer-events: none应用于<div class="contact">。

示例：

.contact {
  pointer-events: none;
}

当鼠标指针移到.menupanel上时，这将阻止mouseout注册.contact事件。