마우스가 움직이지 않을 때 감지

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

  •  03-07-2019
  •  | 
  •  

문제

커서 위치를 찾을 수 있습니다. 그러나 마우스가 안정적인지 알아야합니다. 마우스가 1 분 이상 움직이지 않으면 사용자에게 경고해야합니다.

얼마나 가능한가, 이것에 대한 특별한 이벤트가 있습니까? (즉, JavaScript의 경우에만)

도움이 되었습니까?

해결책

마우스가 미래로 1 분 동안 이동할 때 시간 초과를 설정하고 마우스가 움직이면 타임 아웃을 지우십시오.

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

다른 팁

모든 마우스 이동 이벤트 후에 타이머를 늘리기 시작하는 방법이 없습니까?

1 분이되면 메시지 상자를 팝업하지만 마우스가 움직일 때마다 타이머가 재설정됩니다.

MouseMove 이벤트에서 가치를 재설정하는 타이머를 사용하십시오. 타이머가 1 분에 도달하면 -> 뭔가를하십시오.

더 많은 정보 시간제 노동자 여기 http://www.w3schools.com/js/js_timing.asp
그리고 더 많은 정보 마우스 이벤트를 잡습니다 여기 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 분 이상 통과되고 위치가 변경되지 않으면 사용자에게 경고 할 수 있습니다.

다음은 움직임 요소를 확인할 수있는 일대일 기능입니다.

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