Jak wykrywać zatrzymanie myszy?

Question

Jak można wykryć za pomocą zdarzenia eventListener po zakończeniu mousemove?

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

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

Chcę natychmiast uruchomić funkcję startInteractionTimer po mousemove zakończyła i chciałbym złapać tego. W powyższym przykładzie kodu zaczyna się, gdy mysz zostanie przeniesiona.

Dzięki

Edit: W porządku, ja odpowiedział na moje własne pytanie i skrypt powyżej -^jest dobrze.

Answer 1

Można zawsze zrobić zdarzenia niestandardowego dla niego:

(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)); 

Teraz możesz po prostu to zrobić:

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

Edit:

Ponadto, w celu zachowania spójności z innymi zdarzeniami jQuery:

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

Teraz możesz:

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

Answer 2

Można spróbować ustawić/wyczyścić timeout wyłącznie w celu wykrycia końca przesuwając mysz ...

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

Jak długo chcesz czekać zależy od ciebie. Nie wiem, jak długo chcesz powiedzieć to „koniec mouseMove”

Przykład: http://jsfiddle.net/jeffshaver/ZjHD6/

Answer 3

Oto kolejny rozwiązaniem nietypowym wydarzeniem, ale bez jQuery. Tworzy zdarzenie o nazwie mousestop, które zostanie wyzwolone na elemencie, który znajduje się na wskaźniku myszy. Będzie bańką jak inne zdarzenia myszy.

Więc skoro masz ten kawałek kodu zawarte, można dodać detektory zdarzeń do dowolnego elementu z 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>