更改innerHTML onmousemove事件

Question

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

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

很简单。我知道有你可以用它来撤消OnMouseEnter在或的onmouseover行动OnMouseLeave在事件，但没有“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>