我的 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% 的视口(viewport)。从来没有任何理由滚动，这就是为什么我对覆盖约定的想法感到满意。
非常感谢任何帮助。
最佳答案
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 问题，我发现光标在页面底部时不再隐藏在空格键上。所以我知道浏览器正在考虑 body 长度......
解决方案: 在 document.body 上应用 overflow: hidden 样式。
现在我知道对于各种应用，这可能还不够，但它确实为我解决了这个问题。浏览器知道 body 上有零溢出处理，所以空格键对于滚动是惰性的。
应用此后，其他地方的溢出仍然有效:网络应用程序的其他 div 仍然可以滚动，并具有指定的尺寸。
关于javascript - 按住空格键会导致鼠标光标消失，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31306244/