Почему моя функция наведения работает, а функция onmouseleave - нет? (вызов функции в консоли работает) - PullRequest
Новая
       58

Почему моя функция наведения работает, а функция onmouseleave - нет? (вызов функции в консоли работает)

0 голосов
/ 21 апреля 2020

вот мой кодовый блок:

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

Я пытаюсь создать меню навигации, которое будет скользить при наведении на стрелка и затем скользит, когда ваша мышь покидает меню.

У меня есть UIController.showMenu и UIController.closeMenu.

Если я вызову любой из них в консоли, они будут работать как положено.

Однако прослушиватель событий для closeMenu не работает. Он просто не обнаруживает мышь, покидающую меню, и не закрывается.

Если я добавлю console.log («Hello») к функции, он будет срабатывать при первой загрузке страницы. Но не будет работать, когда мне это нужно.

приложение. 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>

Ответы [ 2 ]

1 голос
/ 21 апреля 2020

вы не должны использовать "on" при добавлении события, просто используйте имя функции 

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

вместо 

document.querySelector('#sideMenu').addEventListener("onmouseleave", UIController.closeMenu);
1 голос
/ 21 апреля 2020

При использовании метода addEventListener() это "mouseleave", а не "onmouseleave"

...