更改innerHTML onmousemove事件

Question

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

假设当鼠标移动到div上时，innerHTML将更改为“鼠标正在移动”。当鼠标停止移动时，它返回到默认的innerHTML值：“鼠标不移动”。

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

如何做到这一点？

Answer 1

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

​

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>

​