Как у вас вызывается функция после того, как мышь находится в div в течение определенного времени? - PullRequest
Новая
       16

Как у вас вызывается функция после того, как мышь находится в div в течение определенного времени?

0 голосов
/ 21 марта 2019

Onmouseover, кажется, вызывает его мгновенно, но я хочу сделать так, чтобы он вызывал функцию после того, как мышь была на div в течение, например, 2 секунд.

Как ты это делаешь?

Ответы [ 2 ]

2 голосов
/ 21 марта 2019

Используйте setTimeout для запуска функции, когда они находятся над элементом. Если они уходят до того, как он выполнится, то удалите его. 

function hoverChange(elem, ms, action) {
  // holds the interval so we know what to remove
  var timer
  // listen for when mouse enters and add a timer
  elem.addEventListener('mouseenter', function () {
    timer = window.setTimeout(action, ms)
  })
  // listen for when the mouse exits and remove it
  elem.addEventListener('mouseleave', function () {
    if(timer) window.clearTimeout(timer)
  })
}

var spanElem = document.querySelector('span')
hoverChange(spanElem, 2000, function() {
  spanElem.classList.toggle('yellow')
})
.yellow { background-color: yellow; }
<span>Hello World</span>
0 голосов
/ 21 марта 2019

Вы можете использовать для этого метод setTimeout в Javascript.По сути, вам нужно добавить двух слушателей событий в ваш div:

- слушатель, который проверяет, находится ли мышь над элементом, и запускает таймер

- другой слушатель, который распознает, ушла ли мышь изэлемент 

document.getElementById("yourDiv").addEventListener("mouseover", mOver);
document.getElementById("yourDiv").addEventListener("mouseout", mOut);
  var mouseOver = false;

  function mOver(e) {
    mouseOver = true;
    setTimeout(doIt, 2000);
  }

  function mOut(e) {
    mouseOver = false;
  }

  function doIt() {
    if (mouseOver) {
      console.log("mouse is over the element and 2 seconds have passed")
    }
  }
...