чистый JS, как иметь несколько слушателей событий mouseleave - PullRequest
Новая
       27

чистый JS, как иметь несколько слушателей событий mouseleave

1 голос
/ 12 октября 2019

Попытка прослушать 2 события мыши, каждое на разных элементах. Вот JS 

function moveDown(event) {
  const submenus = document.getElementsByClassName('sub-menu')
  var navbar = document.getElementById("menu-1");

  var sub

  if (event.target.innerHTML === "ABOUT US") {
    sub = submenus[0]
  } else {
    sub = submenus[1]
  }

  var rect = sub.getBoundingClientRect();
  navbar.style.marginBottom = rect.height + "px"
}


function moveUp(event) {
  var navbar = document.getElementById("menu-1");
  navbar.style.marginBottom = 0
}

(function() {
  var takeAction = document.getElementsByClassName('takeAction')[0]
  var aboutUs = document.getElementsByClassName('aboutUs')[0]

  aboutUs.addEventListener('mouseover', function(event) {
    moveDown(event)
  }, {
    passive: false
  })
  takeAction.addEventListener('mouseover', function(event) {
    moveDown(event)
  }, {
    passive: false
  })

  aboutUs.addEventListener('mouseleave', function(event) {
    moveUp(event)
  }, {
    passive: false
  })
  takeAction.addEventListener('mouseleave', function(event) {
    moveUp(event)
  }, {
    passive: false
  })
})()

Это работает на втором элементе "takeAction", но слушатель отпускания мыши на первом элементе "aboutUs", кажется, работает как mouseout

UPDATE:

* 1007Я попытался создать рабочий фрагмент проблемы, но это сделано в WordPress, и я не могу этого сделать. Тем не менее, вот ссылка на сайт

Если вы наведите курсор мыши на «О НАС», а затем наведите курсор на «ПРИНЯТЬ ДЕЙСТВИЕ», вы увидите проблему

...