javascript - 鼠标在 div 上停留一定时间后如何调用函数？

Question

Onmouseover 似乎会立即调用它，但我想让它在鼠标位于 div 上(例如 2 秒)后调用一个函数。

你是怎么做到的？

Answer 1

当鼠标悬停在元素顶部时，使用 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>