按住空格键会导致鼠标光标消失

Question

我的网络应用程序有使用按住空格键的键盘快捷键。问题在于当按住空格键时，鼠标指针会消失。我认为这是因为浏览器正在尝试向下滚动（即使在我的情况下没有任何要向下滚动的内容）。如果用户在按住空格键的同时移动鼠标指针，则鼠标指针会闪现出现，但一旦鼠标停止移动，它就会再次消失。一旦用户松开空格键，鼠标指针就会保持隐藏状态，直到鼠标再次移动，之后鼠标指针就会保持可见状态。这在Chrome、Safari和Opera（webkit/blink）中都会出现。

除了很多其他的尝试之外，我已经尝试了在事件上使用preventDefault()的通用解决方案，但无论我在哪里监听它，它都不起作用。很明显，这是可能的，因为我以前使用过某些应用程序，它们使用空格键来执行与向下滚动无关的操作。

var html = document.documentElement;
var body = document.getElementsByTagName('body')[0];

document.addEventListener("keydown", function(e) {
    console.log("document keydown");
    e.preventDefault();
    e.stopPropagation();
});

window.addEventListener("keydown", function(e) {
    console.log("window keydown");
    e.preventDefault();
    e.stopPropagation();
});

html.addEventListener("keydown", function(e) {
    console.log("html keydown");
    e.preventDefault();
    e.stopPropagation();
});

body.addEventListener("keydown", function(e) {
    console.log("body keydown");
    e.preventDefault();
    e.stopPropagation();
});


document.addEventListener("keypress", function(e) {
    console.log("document keypress");
    e.preventDefault();
    e.stopPropagation();
});

window.addEventListener("keypress", function(e) {
    console.log("window keypress");
    e.preventDefault();
    e.stopPropagation();
});

html.addEventListener("keypress", function(e) {
    console.log("html keypress");
    e.preventDefault();
    e.stopPropagation();
});

body.addEventListener("keypress", function(e) {
    console.log("body keypress");
    e.preventDefault();
    e.stopPropagation();
});

注意：我的应用程序始终完全覆盖视口的100％。从未有任何滚动的必要，这就是我对覆盖惯例感到满意的原因。

非常感谢任何帮助。

- Ben

---

当您按下不同的键时，是否会发生相同的情况？ - Parris Varney

是的，这种情况发生在任何按键上。例如，我在Chrome中单击此SO页面的边缘，按下空格键，光标会消失，直到我再次移动鼠标。 - Ben

您可能无法解决此问题，我认为您遇到了浏览器功能。即使在像JIRA这样使用键盘快捷键（比如“e”键编辑描述）的网站上，每当按下任何键时鼠标仍会消失。 - Parris Varney

你好！你解决了这个问题吗？我正在尝试构建类似的功能（按住空格键暂时切换到另一个工具），但它只能与修改键一起使用。 - Rustem Kakimov

Answer 1

TL/DR: 在 document.body 上应用 overflow: hidden 样式。

---

我在遇到同样的问题后，在这里找到了一个未回答的问题，但是在5分钟内找到了解决方案。

多年来没有答案，所以我也会解释一下自己的情况，因为它必须是一个罕见的上下文。

我的场景：使用PIXI开发全屏图形应用程序，以及叠加的HTML DOM元素。在MacBook Pro上使用Safari。

兴趣：按空格键与PIXI内容交互

方法：使用状态跟踪变量使用keydown和keyup侦听器。按空格键，在keydown中更新cursor样式时，事件目标是document.body。同样，在keyup中恢复cursor样式。

问题：浏览器想要滚动。即使使用event.preventDefault。

我从不使用空格键滚动页面，因此我完全看不到现有的浏览器行为。

发现：在其他页面上进行实验，包括在SO问题上，我发现当在页面底部时按空格键时，光标停止隐藏。所以我知道浏览器正在考虑body长度...

解决方案：在document.body上应用overflow：hidden样式。

现在我知道对于各种应用程序，这可能不足够，但是对于我来说它确实解决了这个问题。浏览器知道主体上没有溢出处理，因此空格键对于滚动是惰性的。

应用此后，其他地方的溢出仍然有效：Web应用程序的其他div仍然可以滚动，并具有分配的尺寸。

- Tom Pace