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

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% 的视口。从来没有任何理由滚动，这就是为什么我对覆盖约定的想法感到满意。

非常感谢任何帮助。

Answer 1

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

---

我刚刚在同样的问题之后在这里找到了这个未回答的 (!!) 问题，但在 5 分钟内找到了我的解决方案。

几年没有答案，所以我也将解释我自己的情况，因为它一定是罕见的情况。

我的场景： 使用 PIXI 以及覆盖的 HTML DOM 元素开发整页图形应用程序。在 MacBook Pro 上使用 Safari。

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

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

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

我从不使用空格键来滚动页面，所以我对现有的浏览器行为完全视而不见。

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

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

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

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