Cách phát hiện khi mousemove đã dừng

Question

Làm cách nào để phát hiện bằng trình ghi sự kiện khi số mousemove kết thúc?

document.AddEventListener('mousemove', startInteractionTimer, false); 

function startInteractionTimer(){ 
    clearInterval(touchInterval); 
    touchInterval = setInterval(noAction, 6000); 
} 

Tôi muốn bắt đầu chức năng startInteractionTimer ngay sau khi kết thúc mousemove và tôi muốn nắm bắt điều đó. Trên ví dụ mã ở trên, nó đang bắt đầu nếu con chuột được di chuyển.

Cảm ơn

Edit: Alright, tôi đã trả lời câu hỏi của riêng tôi và kịch bản ở trên -^là tốt.

Answer 1

Bạn luôn có thể làm cho một sự kiện tùy chỉnh cho nó:

(function ($) { 
    var timeout; 
    $(document).on('mousemove', function (event) { 
     if (timeout !== undefined) { 
      window.clearTimeout(timeout); 
     } 
     timeout = window.setTimeout(function() { 
      // trigger the new event on event.target, so that it can bubble appropriately 
      $(event.target).trigger('mousemoveend'); 
     }, 100); 
    }); 
}(jQuery)); 

Bây giờ bạn có thể chỉ làm điều này:

$('#my-el').on('mousemoveend', function() { 
    ... 
}); 

Edit:

Ngoài ra, đối nhất quán với các sự kiện jQuery khác:

(function ($) { 
    $.fn.mousemoveend = function (cb) { 
     return this.on('mousemoveend', cb); 
    }); 
}(jQuery)); 

Bây giờ bạn có thể:

$('#my-el').mousemoveend(fn); 

Answer 2

Bạn có thể thử thiết lập/giải phóng một thời gian chờ chỉ để phát hiện khi kết thúc di chuyển chuột ...

var x; 
document.addEventListener('mousemove', function() { 
    if (x) clearTimeout(x); 
    x = setTimeout(startInteractionTimer, 200); 
}, false); 

bao lâu bạn muốn chờ đợi là tùy thuộc vào bạn. Tôi không biết bao lâu bạn muốn nói là "sự kết thúc của một MouseMove"

Ví dụ: http://jsfiddle.net/jeffshaver/ZjHD6/

Answer 3

Dưới đây là một giải pháp tùy chỉnh sự kiện, nhưng không có jQuery. Nó tạo ra một sự kiện được gọi là mousestop sẽ được kích hoạt trên phần tử mà con trỏ chuột đang bật. Nó sẽ bong bóng như các sự kiện chuột khác.

Vì vậy, một khi bạn đã có đoạn mã bao gồm, bạn có thể thêm người nghe sự kiện vào bất kỳ phần tử với addEventListener('mousestop', fn):

(function (mouseStopDelay) { 
 
    var timeout; 
 
    document.addEventListener('mousemove', function (e) { 
 
     clearTimeout(timeout); 
 
     timeout = setTimeout(function() { 
 
      var event = new CustomEvent("mousestop", { 
 
       detail: { 
 
        clientX: e.clientX, 
 
        clientY: e.clientY 
 
       }, 
 
       bubbles: true, 
 
       cancelable: true 
 
      }); 
 
      e.target.dispatchEvent(event); 
 
     }, mouseStopDelay); 
 
    }); 
 
}(1000)); 
 

 
// Example use 
 
document.getElementById('link').addEventListener('mousestop', function(e) { 
 
    console.log('You stopped your mouse while on the link'); 
 
    console.log('Mouse coordinates are: ', e.detail.clientX, e.detail.clientY); 
 
    // The event will bubble up to parent elements. 
 
});

<h1>Title</h1> 
 
<div> 
 
    content content<br> 
 
    <a id="link" href="#">stop your mouse over this link for 1 second</a><br> 
 
    content content content 
 
</div>