マウスが動いていないことを検出する

StackOverflow https://stackoverflow.com/questions/609965

  •  03-07-2019
  •  | 
  •  

質問

カーソルの位置を見つけることができます。しかし、マウスが安定しているかどうかを調べる必要があります。マウスが1分以上動かされなかった場合、ユーザーに警告する必要があります。

どのように可能ですか、これには特別なイベントがありますか？ （JavaScriptのIEのみ）

役に立ちましたか？

解決

マウスが1分先に移動したときにタイムアウトを設定し、マウスが移動した場合はタイムアウトをクリアします：

var timeout;
document.onmousemove = function(){
  clearTimeout(timeout);
  timeout = setTimeout(function(){alert("move your mouse");}, 60000);
}

他のヒント

各マウス移動イベントの後に増分を開始するタイマーを設定する方法はありませんか？

1分に達するとメッセージボックスがポップアップしますが、マウスが動くたびにタイマーがリセットされます。

mousemoveイベントで値をリセットするタイマーを使用します。 タイマーが1分に達した場合-＆gt;何かをします。

タイマーの詳細はこちら http：//www.w3schools .com / js / js_timing.asp
catchinマウスイベントの詳細はこちら http：//www.quirksmode .org / js / events_mouse.html

はい、Javascriptでonmousemoveイベントがあります。必要なものを実現するには、次のようなコードを実行するだけです。

startTimer();
element.onmousemove = stopTimer(); //this stops and resets the timer

たとえば、ドキュメントの本文タグで使用できます。

更新：@Mariusはこれよりも優れた例を達成しました。

onmousemoveイベントを使用できます。その中に、clearTimeout（）、setTimeout（your_warning、1分）。

このスクリプト/スニペットを使用して、マウスポインターの位置を検出できます。および「記憶する」それ。次に、タイマー「setTimeout（...）」を使用します;位置を確認するには、毎秒言って、その時間を覚えておきましょう。

1分以上経過しても位置が変わらない場合は、ユーザーに警告できます。

要素の動きを確認できる1つだけの機能を次に示します。 

function mouse (element, delay, callback) {

   // Counter Object
   element.ms = {};

   // Counter Value
   element.ms.x = 0;

   // Counter Function
   element.ms.y = function () {

      // Callback Trigger
      if ((++element.ms.x) == delay) element.ms.callback(element, element.ms);
   };

   // Counter Callback
   element.ms.callback = callback;

   // Function Toggle
   element.ms.toggle = function (state) {

      // Stop Loop
      if ([0, "off"][state]) clearInterval(element.ms.z);

      // Create Loop
      if ([1, "on"][state]) element.ms.z = setInterval(element.ms.y, 1);
   };

   // Function Disable
   element.ms.remove = function () {

      // Delete Counter Object
      element.ms = null; return delete element.ms;
   };

   // Function Trigger
   element.onmousemove = function () {

      // Reset Counter Value
      element.ms.x = -1;
   };

   // Return
   return element.ms;
};

使用法： mouse（element、delay、callback）

例： ビデオプレーヤーがアイドル状態でフルスクリーンの場合、5秒後にマウスを非表示にする 

let x = mouse(video, 5000, function (a) {
   if (document.webkitIsFullScreen) video.style.cursor = "none";
});

x.toggle(1); addEventListener("mousemove", function () {
   video.style.cursor = "auto";
});

チャットルームAFK（45秒）（チャットボックスとメッセージ送信機能がある場合）： 

let x = mouse(chatBox, (45e3), function (a) {
   chatBox.send({ text: chatBox.username + " is AFK.", italic: true });
});

x.toggle(1); x.addEventListener("mousemove", function () {
  chatBox.send({ text: chatBox.username + " is no longer AFK", italic: true });
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top