JavaScriptのsetInterval（）でマウスの位置をキャプチャする

Question

マウスの位置に応じて1つのdivを移動するjavascriptの関数があります。この関数はsetInterval（）関数で設定され、毎秒実行されます。次のようにマウスの位置をキャプチャする必要があります。

function mousemov() {
  document.getElementById("myDiv").style.left = Event.clientX; //don't work
}

window.onload = function() {
  setInterval("mousemov()",1000);
}

PS：マウスが停止していても関数を実行する必要があるため、mousemoveイベントを使用できません。

助けてくれてありがとう！

Answer 1

イベントオブジェクトにアクセスできるのは、イベントハンドラーの実行中のみです。そのため、ドキュメントでOnMouseMoveイベントを作成し、グローバルにアクセス可能なオブジェクトにマウス座標を保存する必要があります。その後、スクリプト内の他のどこからでもこれらの値にアクセスして、マウスの位置を決定できます。

例を次に示します（jQueryを使用していないため、これは単純なDOMコードです）：

document.onmousemove = function(e) {
    var event = e || window.event;
    window.mouseX = event.clientX;
    window.mouseY = event.clientY;
}

function mousemov() {
    document.getElementById("myDiv").style.left = window.mouseX;
}

window.onload = function() {
    setInterval(mousemov, 1000);
}

clientXとclientYはスクロールを考慮しないことに注意してください。スクロールオフセットを取得して、返された値に適用する必要があります。

Answer 2

まあ、ドキュメントのマウスの動きを聞いてその場所を保存すると、いつでも好きなときに毎秒、登録された最新のマウス位置があります。

これはjqueryの例です

$(document).ready(function()
 {
  $().mousemove(function(e)
   {
       window.mouseX = e.pageX;
       window.mouseY = e.pageY;
  });
});

およびmousemove関数は

になります

function mousemov() { 
    document.getElementById("myDiv").style.left = window.mouseX;
}