如何检测鼠标移动停止

Question

如何使用事件监听器检测mousemove何时结束？

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

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

我希望在鼠标移动结束后立即开始函数startInteractionTimer，并且我想要捕获它。在上面的代码示例中，如果鼠标移动，则会启动。

谢谢

编辑：好的，我自己回答了我的问题，上面的脚本 - ^ 就可以了。

- supersize

---

你的例子难道不是这样做的吗——如果鼠标在一定时间内没有移动，它就会调用“noAction”函数吗？（mousemove事件没有停止事件，那么如何检测呢？只有在与mousedown和mouseup结合使用时才能检测到，例如拖动操作） - t.niese

MouseMove事件在光标已经停止时触发。因此，您可以检测光标是否静止了一段时间，并执行您想要的操作。 - Sergio

不，我的例子在鼠标移动时触发事件！而不是在鼠标移动停止后触发。 - supersize

@TedMosby 这是真的，但每次调用时都会清除间隔。只要鼠标在 6000 毫秒内不停止移动，就不会调用 noAction。如果鼠标在6秒内没有移动，则会调用 noAction。 - t.niese

请返回翻译后的文本：http://richardscarrott.co.uk/posts/view/jquery-mousestop-event -- https://github.com/richardscarrott/jquery-mousestop-event - Joonas

哈哈，t.niese。这有点奇怪，但似乎我没有保存文件！它像你说的那样工作，对造成的麻烦很抱歉！谢谢。 - supersize

Answer 1

你可以为此创建一个自定义事件：

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

现在你只需要这样做：

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

编辑：

另外，为了与其他jQuery事件保持一致：

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

现在你可以：

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

- Nathan MacInnes

Answer 2

你可以尝试设置/清除一个超时时间，以便仅检测鼠标移动的结束...

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

你想等多久是由你决定的。我不知道你认为“鼠标移动结束”的时间有多长。

示例：http://jsfiddle.net/jeffshaver/ZjHD6/

- Jeff Shaver

Answer 3

这里是另一种自定义事件解决方案，但没有使用jQuery。它创建了一个名为mousestop的事件，该事件将在鼠标指针所在的元素上触发。它会像其他鼠标事件一样向上传播。

因此，一旦您包含了那段代码，就可以为任何带有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>

- trincot