使用JavaScript隐藏空闲时的鼠标指针

Question

如果鼠标未活动一段时间（比如5秒钟），是否有可能使用JavaScript将cursor属性设置为none，并在鼠标重新活动时将其设置回auto？

编辑：我意识到none不是cursor属性的有效值。尽管如此，许多Web浏览器似乎仍然支持它。此外，主要用户是我自己，因此几乎不会出现混淆的可能性。

我有两个可以实现类似功能的脚本：

window.addEventListener("mousemove",
    function(){
        document.querySelector("#editor").style.background = "#000";
        setTimeout("document.querySelector('#editor').style.background = '#fff'", 5000);
    }
, true);

和

var timeout;
var isHidden = false;

document.addEventListener("mousemove", magicMouse);

function magicMouse() {
    if (timeout) {
        clearTimeout(timeout);
    }
    timeout = setTimeout(function() {
        if (!isHidden) {
            document.querySelector("body").style.cursor = "none";
            document.querySelector("#editor").style.background = "#fff";
            isHidden = true;
        }
    }, 5000);
    if (isHidden) {
        document.querySelector("body").style.cursor = "auto";
        document.querySelector("#editor").style.background = "#000";
        isHidden = false;
    }
};

每个脚本都能实现当鼠标闲置超过五秒钟时背景色变为白色，当移动光标时背景色变黑。然而，它们无法让光标消失。令我惊讶的是，如果我在JavaScript控制台中输入命令 document.querySelector("body").style.cursor = "none"; 它可以完美地工作。但在脚本内部似乎不起作用。

我已经发布了上述脚本，这是我在使其正常工作的过程中所到达的最远阶段。我并不一定要求修复这些脚本；如果您知道一个更有效的方法来隐藏光标，请分享。

- 木川 炎星

Answer 1

在CSS 2中，none不是cursor属性的有效值。然而，在CSS 3中是有效的。

否则，您可以使用从URI加载的简单透明自定义光标。

我认为这对用户来说非常分散注意力，因此我不建议您实际这样做。

- Joey

---

用户体验并不好，如果出现这样的事情会让用户感到困惑。 - peol

如果媒体正在播放或者不是使用鼠标进行交互，我认为这样做会有一定的价值。 - hunter

即使某些东西并不是为鼠标交互设计的，那么其他选择是什么呢？触摸屏？笔？无论哪种选择都会隐藏正常的鼠标指针，并用在你知道自己单击的位置后就会消失的内容替换它。对于媒体播放器，这可能是有争议的，但我猜一旦浏览器为视频增加全屏功能，这也将成为一个非问题。一般来说，几乎没有什么有效的理由来隐藏鼠标指针，特别是如果它只是屏幕的一部分（比如你的网页或其中的元素）。 - Joey

我使用Chrome的"kiosk模式"构建自助服务系统，并在操作系统之外处理屏幕黑屏等问题，这种情况下隐藏光标是合适且被接受的。我怀疑有很多场合隐藏光标不会 "分散注意力" 或者引起困惑。我还怀疑有许多其他有效的原因。要开动脑筋，我们并不都是大猩猩营销推销员，试图捣乱用户 - 我怀疑这些人在SO上提问的数量非常少。 - Jeremy

一项待处理的编辑由@JamesDonnely提出，指出none现在是CSS3 cursor属性的有效值。 - Kos

Answer 2

以下方法适用于我在Firefox 3.6.13版本中，只要光标位于实际元素上且该元素的光标不是非默认值（因此如果光标位于表单元素或链接上，例如，则不起作用），尽管一般来说，我建议避免使用此方法，因为它是非标准且极其差劲的可用性。

另外：如果有替代方案，例如document.body或document.getElementById()，最好不要使用querySelector()以获得更好的兼容性。

(function() {
    var mouseTimer = null, cursorVisible = true;

    function disappearCursor() {
        mouseTimer = null;
        document.body.style.cursor = "none";
        cursorVisible = false;
    }

    document.onmousemove = function() {
        if (mouseTimer) {
            window.clearTimeout(mouseTimer);
        }
        if (!cursorVisible) {
            document.body.style.cursor = "default";
            cursorVisible = true;
        }
        mouseTimer = window.setTimeout(disappearCursor, 5000);
    };
})();

- Tim Down

---

你可以只需执行 document.body.style.cursor = ""; 即可使其在任何元素上工作。 - Michael Longhurst

这个对我正在构建的亭子很有用。移动鼠标，它会短暂地出现，以使全屏或退出全屏。 - ow3n

Answer 3

这对我很有用（取自https://gist.github.com/josephwegner/1228975）。

请注意，其中提到了一个id为wrapper的HTML元素。

//Requires jQuery - http://code.jquery.com/jquery-1.6.4.min.js
$(document).ready(function() { 


    var idleMouseTimer;
    var forceMouseHide = false;

    $("body").css('cursor', 'none');

    $("#wrapper").mousemove(function(ev) {
            if(!forceMouseHide) {
                    $("body").css('cursor', '');

                    clearTimeout(idleMouseTimer);

                    idleMouseTimer = setTimeout(function() {
                            $("body").css('cursor', 'none');

                            forceMouseHide = true;
                            setTimeout(function() {
                                    forceMouseHide = false;
                            }, 200);
                    }, 1000);
            }
    });
});

- cby016

---

不错，我已经成功地使用了这个。我用 body 替换了 #wrapper，这样我就可以在页面的任何位置离开鼠标了。此外，Chrome 表现不佳，每隔一秒就会触发 mousemove - 为了解决这个问题，我每次都存储鼠标坐标，然后立即在 mousemove 段内将 ev.clientX / Y 与存储的值进行比较。 - IBam

Answer 4

如果有人在2019年仍在寻找答案（就像我一样），这种方法适用于FF 71和Chrome 78：

var DEMO = {
  INI: {
    MOUSE_IDLE: 3000
  },
  hideMouse: function() {
    $("#game").css('cursor', 'none');
    $("#game").on("mousemove", DEMO.waitThenHideMouse);
  },
  waitThenHideMouse: function() {
    $("#game").css('cursor', 'default');
    $("#game").off("mousemove", DEMO.waitThenHideMouse);
    setTimeout(DEMO.hideMouse, DEMO.INI.MOUSE_IDLE);
  },
  showMouse: function() {
    $("#game").off("mousemove", DEMO.waitThenHideMouse);
    $("#game").css('cursor', 'default');
  },
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这很简单明了。这个版本使用DEMO.hideMouse()来开始隐藏鼠标，DEMO.showMouse()取消事件。将#game更改为您选择的div...

与lambda表达式相比，使用on和off开关以及命名函数更加清晰易懂。

我知道OP没有指定需要使用JQuery来回答，但是根据我的经验：我总是很高兴看到不同的方法来学习。

- Lovro

Answer 5

在我的自助应用程序中，为了确保移出屏幕保护时不会丢失任何“按下”的字符（通常通过条形码扫描器或RFID读卡器发送到PC），并确保屏幕立即打开，我使用以下代码片段，以及一个透明的光标文件，并禁用主机操作系统中所有的屏幕保护/节能选项。这在Chrome 12中有效，并可能在许多其他浏览器中也有效。 我认为没有任何特定于Chrome的代码——只是最容易自动启动进入自助模式的东西。

对INPUT元素进行迭代的松散部分是必需的，因为这些表单部分将保留它们的默认（通常是白色）背景。

如果您使用图像、有色文本或其他此类对象，则需要想办法处理这些问题。我只构建数据采集应用程序，所以屏幕上只有黑色文本。将页面背景变为黑色可以使整个屏幕变成黑色，并防止烧屏。

这可以通过应用各种CSS位通过JS完成，但它有效，而且所有代码都在一个地方，所以很容易复制到诸如此类的地方。

<body onkeydown="unSS();" id="thePage">

在body中触发onkeydown事件，以便每次检测到按键时都会重置计时器。

<script type="text/javascript">

var ScreenSaver = 10; // minutes

SS(); // start the timer up

function unSS()
{
    document.getElementById('thePage').style.background='White';
    for (var i = 0; i < document.getElementsByTagName('INPUT').length; i++)
        {
            document.getElementsByTagName('INPUT')[i].style.background='White';
        }

    //put the cursor back.
    document.getElementById('thePage').style.cursor = 'default';

    ScreenSaver=10;
}

function SS()
{
    ScreenSaver = ScreenSaver-1;  //decrement. sorry for the vb-style. get over it.

    if (ScreenSaver<=0)
        {
            document.getElementById('thePage').style.background='Black';
            for (var i = 0; i < document.getElementsByTagName('INPUT').length; i++)
                {
                    document.getElementsByTagName('INPUT')[i].style.background='Black';
                }
               //change the cursor to a transparent cursor. 
               //you can find the file on the web. 
               //Search for "transparent cursor cur download"
               document.getElementById('thePage').style.cursor = 'url(transparentCursor.cur)';
        }

    setTimeout("SS();",60000);  // fire the thing again in one minute.
    }
...

- Jeremy

Answer 6

我已经找到了一个简单的解决方案来解决间歇性无光标问题，就是在页面上创建一个透明的<div id="overlay"> </div>，并将CSS样式属性设置为：

#overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: transparent;
  cursor: none;
  margin: 0;
  padding: 0;
  border: 0;
}

让JavaScript将可见性更改为“visible”或“hidden”。 “visible”层将隐藏光标。隐藏层则相反。

- Andrew

Answer 7

有一个 jQuery 插件 idletimer，可以检查用户是否处于活动状态。

- Codler