CODEWITHSUNDEEP
javascriptjqueryhtmlcss
garcia venture
garcia venture

Reputation: 65

Change innerHTML onmousemove event

i want to change the innerHTML of a div with onmousemove event.

Let's say that when the mouse move over the div, the innerHTML change to "Mouse is Moving". And when the mouse stop moving it return back to the default innerHTML value: "Mouse is not moving".

Pretty simple. I know there is a onmouseleave event you can use to undo onmouseenter or onmouseover actions but there is no "onmousecalm" event to undo onmousemove.

how to achieve that ?

Upvotes: 1

Views: 463

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

You can just use mousemove to set the innerHTML and every time the event fires, get a timestamp then use a setInterval with some sort of threshold to detect when the mouse has stopped moving to reset the 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>

Upvotes: 1

Related Questions