javascript - 更改 innerHTML onmousemove 事件

Question

我想用 onmousemove 事件改变一个 div 的 innerHTML。

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

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

如何实现？

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>