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

Question

我的网络应用程序具有涉及按住空格键的键盘快捷键。问题是按住空格键时鼠标光标消失。我认为正在发生的事情是浏览器正在尝试向下滚动（即使在我的情况下从来没有任何东西可以向下滚动）。如果用户在按住空格键的同时移动鼠标光标，则光标会在视图中闪烁，只有当鼠标停止移动时才会再次消失。一旦用户释放空格键，鼠标光标将保持隐藏状态，直到再次移动鼠标，之后光标将保持可见。这种情况发生在 Chrome、Safari、Opera (webkit/blink) 中。

在许多事情中，我尝试了preventDefault()on the event 的规范解决方案，无论我在哪里听，它都不起作用。显然，这是可能的，因为我之前使用过的应用程序使用空格键来执行除向下滚动之外的其他操作。

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监听器来使用状态跟踪变量。按空格键，cursor当事件目标是 document.body 时，在 keydown 中更新样式。同样恢复cursorkeyup 中的样式。

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

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

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

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

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

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