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样式。同样，在键盘设置中还原cursor样式。

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

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

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

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

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

应用此选项后，仍然可以在其他地方执行溢出操作：Web应用程序的其他div仍可以滚动并具有指定的尺寸。

持有空格键会导致鼠标光标消失

1 个答案: