为什么我的悬停功能有效，但我的 onmouseleave 功能无效？（在控制台中调用该函数有效）答案

【问题标题】：Why is my hover function working, but my onmouseleave function is not? (calling the function in the console works)为什么我的悬停功能有效，但我的 onmouseleave 功能无效？（在控制台中调用该函数有效）
【发布时间】：2020-04-21 14:19:39
【问题描述】：

这是我的代码笔：

https://codepen.io/squishyboots19996/pen/BaoQjPL

我正在尝试创建一个导航菜单，当您将鼠标悬停在箭头上时它会滑入，然后当您的鼠标离开菜单时会滑开。

我有 UIController.showMenu 和 UIController.closeMenu。

如果我在控制台中调用其中任何一个，它们都会按预期工作。

但是 closeMenu 的事件侦听器不起作用。它只是没有检测到鼠标离开菜单并且没有关闭。

如果我将 console.log("Hello") 添加到函数中，它将在页面首次加载时触发。但是当我需要它时不会工作。

app.js：

var Controller = (function() {
    UIController.updateNav;
    setInterval(UIController.moveArrowDown, 3000);
    //UIController.addBodyMargin();
 document.querySelector('#menuArrow').addEventListener("mouseover", UIController.openMenu);
      document.querySelector('#sideMenu').addEventListener("onmouseleave", UIController.closeMenu);
});
//-----------------------------------------------------------
var UIController = (function() {

    return {
        openMenu: (function(){
          document.getElementById('sideMenu').style.marginLeft = '0';
          document.getElementById('menuArrow').style.marginLeft = '250px';
          document.body.style.marginLeft = '25px'
        }),
        closeMenu: (function(){
          document.getElementById('sideMenu').style.marginLeft = '-250px';
          document.getElementById('menuArrow').style.marginLeft = '0';
          document.body.style.marginLeft = '0';
        })
        }

})();


document.addEventListener('DOMContentLoaded', (event) => {
  Controller();
})

navbar.css：

.sidemenu {
  height: 100vh;
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: red;
  z-index: 5001;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: -250px;
  transition: .5s;
  cursor: pointer;
}

.sidemenu ul {
  list-style: none;
  padding: 0;
}

.sidemenu a {
  text-decoration: none;
  font-size: 2rem;
}

.expand-arrow {
  z-index: 4999;
  position: fixed;
  transition: .5s;
  bottom: 50%;
}

HTML：

<body>
        <div class="sidemenu" id="sideMenu">
            <ul>
                <li><a>Home</a></li>
                <li><a>About</a></li>
                <li><a>Questionnaire</a></li>
            </ul>
        </div>
        <i class="expand-arrow" id="menuArrow">SHOW MENU BUTTON ></i>

        <section class="child about-section" id="aboutSection">
            <div class="about-section__content">
                <div class="about-section__content__info-box">
                    <h1 class="about-section__content__info-box__header">About Us</h1>
                    <p class="about-section__content__info-box__text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, soluta magni exercitationem consectetur natus assumenda dignissimos quasi porro non doloremque labore odit quae accusantium excepturi, dicta recusandae possimus. Necessitatibus, ipsam.
                        Esse dolorem porro quo velit odit quam, rerum, non optio, labore aliquam ducimus totam molestias ipsa quasi explicabo voluptates. Quas eius dolor harum optio corrupti quo impedit dolorem sunt porro?
                        Eaque officia vero, facere possimus exercitationem sint magnam aliquam veniam, ipsam soluta eveniet ex iusto perferendis blanditiis a repellendus assumenda dolores natus dolorum. Cumque vero deserunt fuga autem reprehenderit dignissimos.
                    </p>
                </div>
            </div>
        </section>

        <script src="app.js"></script>

</body>

【问题讨论】：

错字？ onmouseleave 应该是 mouseout?
所有在线文档都说是onmouseleave，但是我刚刚将其更改为mouseleave，现在它可以工作了（虽然它有点不稳定，但这将与 CSS 相关）

标签： javascript html css addeventlistener onmouseout

【解决方案1】：

当使用addEventListener() 方法时，它是"mouseleave" 而不是"onmouseleave"

【讨论】：

原来如此。非常感谢！

【解决方案2】：

添加事件时不应使用“on”，只需使用函数

document.querySelector('#sideMenu').addEventListener("mouseleave", UIController.closeMenu);

而不是

document.querySelector('#sideMenu').addEventListener("onmouseleave", UIController.closeMenu);

【讨论】：