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

Question

我的web应用程序有键盘快捷键，需要按住空格键。问题是当按住空格键时，鼠标光标会消失。我认为发生的事情是浏览器试图向下滚动(即使在我的情况下，从来没有任何东西可以向下滚动)。如果用户在按住空格键的同时移动鼠标光标，光标会闪烁进入视图，当鼠标停止移动时，光标会再次消失。一旦用户松开空格键，鼠标光标将保持隐藏状态，直到再次移动鼠标，之后光标将保持可见状态。这发生在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: apply overflow: hidden style on document.body.

---

在同样的问题之后，我在这里发现了这个没有答案的问题，但在5分钟内找到了我的解决方案。

几年没有答复，所以我也解释一下我自己的情况，因为这一定是一个罕见的情况。

我的场景:使用PIXI开发全页图形应用程序，以及覆盖的HTML DOM元素。在MacBook Pro上使用Safari浏览器

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

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

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

我从来没有使用空格键来滚动页面，所以我完全不知道现有的浏览器行为。

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

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

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

在应用了这个之后，其他地方的溢出仍然有效:web应用的其他div仍然可以滚动，具有指定的尺寸。