Comment détecter si mousemove est terminé?

Vous pouvez essayer de définir / effacer un délai d'attente uniquement pour détecter la fin du déplacement de la souris …

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

Combien de temps vous voulez attendre dépend de vous. Je ne sais pas combien de temps vous voulez dire est "la fin d'un mousemove"

Exemple: http://jsfiddle.net/jeffshaver/ZjHD6/

Vous pouvez toujours faire un événement personnalisé pour cela:

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

Maintenant, vous pouvez faire ceci:

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

Modifier:

Aussi, pour la cohérence avec d'autres événements jQuery:

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

Maintenant vous pouvez:

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

Voici une autre solution personnalisée, mais sans jQuery. Il crée un événement appelé mousestop qui sera déclenché sur l'élément sur lequel le pointeur de la souris est activé. Il se déroulera comme d'autres événements de souris.

Ainsi, une fois que vous avez inclus ce code, vous pouvez ajouter des auditeurs d'événements à n'importe quel élément avec 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>