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

Question

我的 Web 应用程序具有涉及按住空格键的键盘快捷键。问题是按住空格键时鼠标光标消失。我认为正在发生的事情是浏览器试图向下滚动(即使在我的情况下从来没有任何东西可以向下滚动)。如果用户在按住空格键的同时移动鼠标光标，光标会闪烁到 View 中，只有在鼠标停止移动时才会再次消失。一旦用户释放空格键，鼠标光标将保持隐藏状态，直到再次移动鼠标，之后光标保持可见。这发生在 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();
});

注意:我的应用始终恰好是视口(viewport)的 100%。从来没有任何理由滚动，这就是为什么我对覆盖约定的想法很满意。

非常感谢任何帮助。

Answer 1

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

---

我刚刚在遇到同样的问题后在这里发现了这个 Unresolved (!!) 问题，但在 5 分钟内找到了我的解决方案。

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

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

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

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

问题:浏览器想要滚动。即使在使用 event.preventDefault 时也是如此。

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

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

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

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

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