innerHTML onmousemoveイベントを変更する

Question

onmousemoveイベントでdivのinnerHTMLを変更したいと思います。

divをマウスで移動するとinnerHTMLが「マウスが移動しています」に変わったとします。そしてマウスが動くのを止めるとき、それはデフォルトのinnerHTML値に戻ります： "マウスは動いていません"。

非常にシンプル。私はあなたがのonmouseover onmouseenterまたはアクションを元に戻すために使用することができますonmouseleaveイベントがある知っているが、 ONMOUSEMOVE を元に戻すには、no「onmousecalm」イベントはありません。

これを達成する方法は？

Answer 1

あなただけのタイムスタンプが、その後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>

をリセットするには、マウスの移動が停止したときを検出するための閾値のいくつかの並べ替えと setIntervalを使用し、 innerHTMLと毎回イベント火災を設定する mousemoveを使用して取得することができます