更改 innerHTML onmousemove 事件

Question

我想用 onmousemove 事件更改 div 的 innerHTML。

假设当鼠标移到 div 上时，innerHTML 变为“Mouse is Moving”。当鼠标停止移动时，它会返回到默认的 innerHTML 值：“鼠标没有移动”。

很简单。我知道有一个 onmouseleave 事件可用于撤消 onmouseenter 或 onmouseover 操作，但没有“onmousecalm”事件可撤消 onmousemove。

如何实现？

Answer 1

您可以只使用mousemove 设置innerHTML，每次事件触发时，获取时间戳，然后使用带有某种阈值的setInterval 来检测鼠标何时停止移动以重置@987654324 @

var div = document.querySelector('div'),
    move = div.getAttribute('data-move'),
    pause = div.innerHTML,
    threshold = 500;

div.addEventListener('mousemove',function() {
  lastMoved = new Date().getTime();
  div.innerHTML = move;
  var timeout = setTimeout(function() {
    var nowTime = new Date().getTime();
    if (nowTime - lastMoved > threshold) {
      div.innerHTML = pause;
    }
  }, threshold)
});

div {
  padding: 5em;
  border: 1px solid black;
}

<div data-move="mouse is moving">mouse is not moving</div>