jQuery - 检测鼠标是否还在？答案

【问题标题】：jQuery - detect if the mouse is still?jQuery - 检测鼠标是否还在？
【发布时间】：2012-12-30 20:16:03
【问题描述】：

我想知道是否有一种方法可以检测鼠标在 jQuery 中是否空闲 3 秒。有没有我不知道的插件？因为我不相信会有原生的 jQuery 方法。任何帮助将不胜感激！

【问题讨论】：

Determine if mouse is still in javascript/jQuery?的可能重复

【解决方案1】：

您可以监听mousemove 事件，在它发生时启动超时并取消任何现有的超时。

var timeout = null;

$(document).on('mousemove', function() {
    clearTimeout(timeout);

    timeout = setTimeout(function() {
        console.log('Mouse idle for 3 sec');
    }, 3000);
});

DEMO

不用 jQuery 也可以很容易地做到这一点（这里只绑定事件处理程序是 jQuery 特定的）。

【讨论】：

谢谢！这正是我一直在寻找的。 :-D
可能希望在计时器触发后将timeout 设置回null，以避免执行无效的clearTimeout()。
@jfriend00：没关系，真的。 whatwg.org/specs/web-apps/current-work/multipage/… 甚至是 null 支票。
@FelixKling 好的，所以我将它与 jScrollPane 插件结合使用，这样如果用户空闲 3 秒，滚动条就会消失。当用户不空闲时，如何使它重新出现？（例如，当他/她移动鼠标时？）我尝试制作一个完全独立的功能，但它不起作用。
@ModernDesigner：只需放入事件处理程序中。每当鼠标移动时，mousemove 事件就会被触发（如前所述），即它不再空闲。看看我如何删除演示中的文本。

【解决方案2】：

不需要插件，甚至根本不需要 jQuery：

(function() {
    var idlefunction = function() {
          // what to do when mouse is idle
        }, idletimer,
        idlestart = function() {idletimer = setTimeout(idlefunction,3000);},
        idlebreak = function() {clearTimeout(idletimer); idlestart();};
    if( window.addEventListener)
        document.documentElement.addEventListener("mousemove",idlebreak,true);
    else
        document.documentElement.attachEvent("onmousemove",idlebreak,true);
})();

【讨论】：