javascript - 按住空格键时自定义 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)
});