javascript 如何检测 mousemove 何时停止
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15066849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect when mousemove has stopped
提问by supersize
How is it possible to detect with an eventListener when mousemovehas finished?
完成后如何使用 eventListener 进行检测mousemove？
document.AddEventListener('mousemove', startInteractionTimer, false);
function startInteractionTimer(){
clearInterval(touchInterval);
touchInterval = setInterval(noAction, 6000);
}
I want to start the function startInteractionTimerimmediately after the mousemove has ended and I would like to catch that. On the code example above, it is starting if the mouse is moved.
我想startInteractionTimer在 mousemove 结束后立即启动该功能，我想抓住它。在上面的代码示例中，如果移动鼠标，它就会启动。
Thanks
谢谢
Edit:Alright, I answered my own question and the script above --^ is just fine.
编辑：好的，我回答了我自己的问题，上面的脚本 --^ 很好。
采纳答案by Nathan MacInnes
You could always make a custom event for it:
您始终可以为其创建自定义事件：
(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));
Now you can just do this:
现在你可以这样做：
$('#my-el').on('mousemoveend', function () {
...
});
Edit:
编辑：
Also, for consistency with other jQuery events:
此外，为了与其他 jQuery 事件保持一致：
(function ($) {
$.fn.mousemoveend = function (cb) {
return this.on('mousemoveend', cb);
});
}(jQuery));
Now you can:
现在你可以：
$('#my-el').mousemoveend(fn);
回答by Jeff Shaver
You could try setting/clearing a timeout solely to detect the end of moving the mouse...
您可以尝试仅设置/清除超时以检测移动鼠标的结束...
var x;
document.addEventListener('mousemove', function() {
if (x) clearTimeout(x);
x = setTimeout(startInteractionTimer, 200);
}, false);
How long you want to wait is up to you. I don't know how long you want to say is "the end of a mousemove"
你想等多久取决于你。不知道你想说多久是“鼠标移动的结束”
回答by trincot
Here is another custom-event solution, but without jQuery. It creates an event called mousestopwhich will be triggered on the element that the mouse pointer is on. It will bubble up like other mouse events.
这是另一个自定义事件解决方案，但没有 jQuery。它创建一个名为的事件mousestop，该事件将在鼠标指针所在的元素上触发。它会像其他鼠标事件一样冒泡。
So once you have that piece of code included, you can add event listeners to any element with addEventListener('mousestop', fn):
因此，一旦包含了那段代码，就可以使用以下命令将事件侦听器添加到任何元素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>