自定义CSS光标在空格栏上消失

Question

我正在按空格键收听keydown，并立即删除同一个侦听器。在keyup上，我再次设置侦听器。回调函数在主体上设置一个类，该类应显示自定义光标。但随着空格键的按下；抓；光标只在鼠标移动时显示，而在鼠标处于静态位置时根本不显示CSS光标（！）。这当然是出乎意料的，但Firefox和Chrome的行为都是一样的，所以我可能做错了什么。没有通常的"；强制渲染"；把戏对我很管用。非常感谢你的帮助。

http://codepen.io/anon/pen/XbzeeE

并且，作为记录，html:

<div id="plot"></div>

带有CSS:

html, body {
    height: 100%;
}
body {
    background: gray;
    display: flex;
  align-items: center;
    margin: 0;          
}
#plot {
    background: #fff;
    box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);
    margin: 0 auto;
    width: 500px;
    height: 400px;
}
.space-bar-depressed > #plot {
    cursor: -webkit-grab;
    cursor: -moz-grab;
}

和js:

var body = document.body;
var plot = document.getElementById("plot");
var handleSpaceKeyDown = function(e) {
    var key = e.which;
    e.preventDefault();
    e.stopPropagation();    
    if (key == 32 ) {
        body.classList.add("space-bar-depressed");
        body.removeEventListener("keydown", handleSpaceKeyDown, false);
    }
}
body.addEventListener("keydown", handleSpaceKeyDown, false);
body.addEventListener("keyup", function(e) {
    var key = e.which;
    if (key === 32 ) {
        body.classList.remove("space-bar-depressed");
        body.addEventListener("keydown", handleSpaceKeyDown, false);
    }
});

Answer 1

弄清楚了：空格键的默认行为是向下滚动。这会导致光标在滚动过程中瞬间消失。如果你按住空格键，窗口会停在页面底部，基本上隐藏空格键，除非鼠标/指针在运动。解决方案只是吃掉窗口级别的空格键：

window.addEventListener("keydown", function(e) {
 return !(e.which === 32)
});