Question

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

让我们说当鼠标移过div时，innerHTML会变为“Mouse is Moving”。当鼠标停止移动时，它将返回默认的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>

更改innerHTML onmousemove事件

1 个答案: